<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>js原生web轮播图</title>

     <style>

         *{

             margin:0;

             padding:0;

             list-style: none;

             -moz-user-select: none;/*文字不可选择*/

             -khtml-user-select: none;/*文字不可选择*/

             user-select: none;/*文字不可选择*/

         }

         #container{

             width: 600px;

             height: 400px;

             position: relative;

             overflow: hidden;

         }

         #slider{

             margin-left:-600px;

             width: 4200px;

             height: 400px;

         }

         #slider li{

             width: 600px;

             height: 400px;

             float: left;

         }

         img{

             width: 600px;

             height: 400px;

         }

         #prev{

             position: absolute;

             top:40%;

             left:0px;

             width: 50px;

             height: 50px;

             background-color: #eee;

             z-index: 999;

             line-height:50px;

             text-align: center;

         }

         #prev:hover{

             cursor: pointer;

         }

         #next{

             position: absolute;

             top:40%;

             right:0px;

             width: 50px;

             height: 50px;

             background-color: #eee;

             z-index: 999;

             line-height:50px;

             text-align: center;

         }

         #next:hover{

             cursor: pointer;

         }

         #dotul{

             position: absolute;

             bottom:100px;

             left:38%;

             width: 150px;

             height: 20px;

         }

         .dot{

             background-color: green;

         }

         #dotul li{

             margin-left:10px;

             width: 20px;

             height: 20px;

             float: left;

             border-radius: 10px;

             z-index: 999;

         }

         li{

             background-color: red;

         }

     </style>

 </head>

 <body>

     <div id="container">

         <ul id="slider">

             <li><img src="5.jpg" alt=""></li>

             <li><img src="1.jpg" alt=""></li>

             <li><img src="2.jpg" alt=""></li>

             <li><img src="3.jpg" alt=""></li>

             <li><img src="4.jpg" alt=""></li>

             <li><img src="5.jpg" alt=""></li>

             <li><img src="1.jpg" alt=""></li>

         </ul>

         <ul id="buttons">

             <li id="prev">上一张</li>

             <li id="next">下一张</li>

         </ul>

         <div id="dots">

             <ul id="dotul">

                 <li index="1" class="dot"></li>

                 <li index="2"></li>

                 <li index="3"></li>

                 <li index="4"></li>

                 <li index="5"></li>

             </ul>

     </div>

     </div>

     <script>

         var container = document.getElementById('container');

         var slider = document.getElementById('slider');

         var prev=document.getElementById('prev');

         var next=document.getElementById('next');

         var dots=document.getElementById('dotul').getElementsByTagName('li');

         var index=1;

         var timer;

         function dotsInit(){

             for (var i = 0; i < dots.length; i++) {

                 console.log(dots[i]);

                 dots[i].onclick=function(){

                     var $index=parseInt(this.getAttribute("index"));

                     slider.style.marginLeft=($index)*(-600)+"px";

                     index=$index;

                 }

             }

         }

         dotsInit();

         function animate(option){

             var sliderLeft=slider.offsetLeft;

             slider.style.marginLeft=parseInt(sliderLeft)+option+'px';

         }

         function dotsTurn(){

             for(var i=0;i<dots.length;i++){

                 if(dots[i].getAttribute('index')==index){

                     dots[i].className='dot'

                 }else{

                     dots[i].className=''

                 }

             }

         }

         prev.onclick=function(){

             if(slider.offsetLeft % 600 !=0){

                 return;

             }

             slider.style.transition="0.5s";

             animate(600);

             (index==1)?(index=5):index--;

         }

         next.onclick=function(){

             if(slider.offsetLeft % 600 !=0){

                 return;

             }

             slider.style.transition="0.5s";

             animate(-600);

             (index==5)?(index=1):index++;

         }

         slider.addEventListener("transitionend",function(){

             if(slider.offsetLeft==-3600){

                 slider.style.transition="0s";

                 slider.style.marginLeft="-600px";

             }

             if(slider.offsetLeft==0){

                 slider.style.transition="0s";

                 slider.style.marginLeft="-3000px";

             }

             dotsTurn();

         });

         function init(){

             slider.style.transition="0.5s";

             timer=setInterval(next.onclick,5000);

         }

         init();

         slider.addEventListener('mouseenter',function(){

             clearInterval(timer);

         })

         slider.addEventListener('mouseout',init)

     </script>

 </body>

 </html>

JS+css3焦点轮播图PC端的更多相关文章

  1. js点击拉拽轮播图pc端移动端适配

    <div class="content"> <button class="left">left</button> <b ...

  2. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  3. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  4. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  5. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  6. JS---案例---左右焦点轮播图(tb)

    案例---左右焦点轮播图(tb) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  8. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  9. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. selenium 遇到chrome 弹出是否保存密码框

    --待验证(以下是java脚本) ChromeOptions options = new ChromeOptions(); options.addArguments("--start-max ...

  2. phpstudy配置php7.1.11 + phpstudy nginx伪静态

    切记要把新的php版本配到环境变量,cmd才会生效 php7.1.11下载地址 http://windows.php.net/download/ 下载之后,解压. 重名的为php-7.1.11-nts ...

  3. HTTP Status 404(The requested resource is not available)

    这个问题之前在部署项目工程的时候经常遇见,今天我大致总结下出现这样的原因: 1.首先想到的是没有部署项目,但是你却在访问这个,这种不是很常见(对于老手). 2.其次是URL输入错误: 排错方法: 首先 ...

  4. github常见错误

    如果输入$ Git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 提示出错信息:fatal: remote ...

  5. csv文件的格式

    csv, comma separated values csv是一种纯文本文件. csv文件由任意数目的记录构成,记录间以换行符分割,每条记录由字段构成,字段间以逗号作为分隔符. 如果字段中有逗号,那 ...

  6. 20179209《Linux内核原理与分析》第十二周作

    缓冲区溢出漏洞实验 缓冲区溢出简介 缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器 ...

  7. HDU 4772 Zhuge Liang&#39;s Password （简单模拟题）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4772 题面: Zhuge Liang's Password Time Limit: 2000/1000 ...

  8. linux c编程：线程互斥二 线程死锁

    死锁就是不同的程序在运行时因为某种原因发生了阻塞,进而导致程序不能正常运行.阻塞程序的原因通常都是由于程序没有正确使用临界资源. 我们举个日常生活中的例子来比喻死锁.我们把马路上行驶的汽车比作运行着的 ...

  9. 【转载】Spring介绍之二

    Spring框架,是进行对象管理,对象关联,解耦的一个中间层框架.SSH(Struts+Spring+Hibernate)三大Spring在中间就起着一个承上启下的作用.好,首先我们先来看一下Spri ...

  10. deviceToken的获取（二）

    第一步:申请证书: 第二步:申请app ids,应用名字必须一致.然后再进入进行编辑,使其enable,绿灯. 第三步:申请provisioning profile,生成.mobileprovisio ...