原生javascript焦点轮播图

刚刚学会，写了一个轮播图效果，不过bug蛮多，请高手指点一下，谢谢

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>电影轮播图</title>
  6.     <style type="text/css">
  7.         *{margin:0;padding: 0;list-style: none;}
  8.         body{}
  9.         #container{1000px;height:409px;position:relative;margin:20px auto;overflow: hidden;}
  10.         #list{5000px;height:409px;position:absolute;z-index: 1}
  11.         #list img{float:left;display: block;}
  12.         #pre{background-image:urlhttp://www.w3cfuns.com/data/attachment/album/201411/17/153459b7h8s70shfr2hwrd.png);45px;height:45px;float:left;position:absolute;top:190px;left:10px;cursor:pointer;display:none;z-index: 2;}
  13.         #next{background-image: url(http://www.w3cfuns.com/data/attachment/album/201411/17/153459g52888zwz1wa11tm.png);45px;height:45px;float: left;position:absolute;top:190px;right:10px;cursor:pointer;display:none;z-index: 2;}
  14.         #container:hover #pre,#container:hover #next{display: block;}
  15.         #pre:hover,#next:hover{background-color: rgba(0,0,0,0.7);   }
  16.         #dot{1000px;height:10px;position:absolute;bottom:15px;left:450px;z-index: 10;}

  18.         #dot span{10px;height:10px;display:block;border-radius:10px;background-color: #fff;margin:0 5px;float: left;cursor:pointer;}
  19.        
  20.         #dot .on{background-color: #69aaec;}
  21.     </style>
  22.     <script type="text/javascript">
  23.         window.onload = function(){
  24.             var container = document.getElementById('container');//定义container，获取container id；
  25.             var list = document.getElementById('list');//定义list，获取list id；
  26.             var dot = document.getElementById('dot').getElementsByTagName('span');//定义dot ，获取dot id；
  27.             var pre = document.getElementById('pre');//定义 pre（上一张），获取pre id；
  28.             var next = document.getElementById('next');//定义next(下一张)，获取next id;
  29.             var index = 1;//定义index初始值

  31.             var animated = false;

  33.             function showDot(){//遍历圆点的滚动状态
  34.                 for(var i = 0;i < dot.length;i++){
  35.                     if(dot[i].className == 'on')//判断圆点的className是否为'on'的状态，
  36.                     {
  37.                         dot[i].className = '';//如果是的话，就显示初始值;
  38.                         break;//显示初始值之后跳出函数；
  39.                     }
  40.                 }
  41.                 dot[index - 1].className = 'on';//因为数组第一个从0开始
  42.             }
  43.             function animate(offset){//定义animated（offset）函数
  44.                 animated = true;
  45.                 var newLeft = parseInt(list.style.left) + offset  //定义一个newLeft 变量，赋值parseInt(list.style.left) + offset;
  46.                 var time = 500;//位移时间；
  47.                 var interval = 10;//位移间隔时间
  48.                 var speed = offset/(time/interval);//每次位移的距离；

  50.                 function go(){

  52.                     if( (speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
  53.                         list.style.left = parseInt(list.style.left) + speed + 'px';
  54.                         setTimeout(go,interval);

  56.                     }
  57.                     else{
  58.                         animated = false;
  59.                         list.style.left = newLeft   +'px';//list.style.left的使用parseInt转换为数字
  60.                         if(newLeft > 0 ){//判断left是否大于初始位置，如果大于返回最小值
  61.                             list.style.left = -4000 + 'px';
  62.                         }
  63.                         if(newLeft < -4000){//判断left是否小于最小值，如果小于返回初始值
  64.                             list.style.left = 0 + 'px';
  65.                         }
  66.                     }

  68.                 }
  69.                 go();


  72.             
  73.             }
  74.             next.onclick = function(){
  75.                 if(index == 5){//判断index圆点的状态，如果等于最大值，那下一次就会回到最小值
  76.                     index =1;
  77.                 }else{//否则就按正常步骤，显示index+1；
  78.                     index += 1;
  79.                 }

  81.                 showDot();//调用函数showDot()，显示className='on';
  82.                 if(!animated){
  83.                 animate(-1000);//调用function animate（offset）函数，进行-1000操作，显示下一张图片
  84.                    }
  85.             }

  87.             pre.onclick = function(){
  88.                 if(index == 1){//判断index圆点的状态，如果等于最小值，那下一次就会回到最大值
  89.                     index =5;
  90.                 }else{//否则就按正常步骤，显示index-1；
  91.                     index -= 1;
  92.                 }

  94.                 showDot();//调用函数showDot()，显示className='on';
  95.                 if(!animated){
  96.                 animate(+1000);//调用function animate（offset）函数，进行+1000操作，显示上一张图片
  97.                 }
  98.             }
  99.             for(var i = 0;i < dot.length; i++){// 遍历dot长度
  100.                 dot[i].onclick = function(){//圆点单击时间函数
  101.                     if(this.className == 'on'){//判断该圆点是否已经被选中，如选中就返回，不执行之后的函数
  102.                         return;
  103.                     }
  104.                     var myIndex = parseInt(this.getAttribute('index'));//定义myIndex函数目标index（圆点）
  105.                     var offset = -1000 * (myIndex - index); //计算目标偏移的坐标    计算方式（目标index（myIndex） - 原index ）* -1000
  106.                     if(!animated){
  107.                     animate(offset);//调用animated（offset）函数执行偏移的坐标值
  108.                     }
  109.                     index = myIndex;//将index函数返回为最新的myIndex数值
  110.                     showDot();//调用shouDot函数
  111.                    
  112.                 }
  113.             }

  115.             var timer = setInterval(next.onclick,3000) //自动切换时间设置 调用setInterval()函数，参数为：next.onclick,时间为3000
  116.             container.onmouseover = function(){//当鼠标悬在container容器上时，调用clearInterval，清除timer；
  117.                     clearInterval(timer);
  118.                 }
  119.             container.onmouseout = function(){//当鼠标移出container容器时，开始执行setInterval函数
  120.                 timer = setInterval(next.onclick,3000);//调用setInterval()函数，参数为：next.onclick,时间为3000
  121.             }
  122.         }
  123.     </script>
  124. </head>
  125. <body>
  126.     <div id="container">
  127.         <div id="pre"></div>
  128.         <div id="next"></div>
  129.         <div id="list" style="left:0px;">
  130.             <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153455iy401r4bm04456lr.jpg"></a>
  131.             <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153458yjegky9j4bigrkfy.jpg"></a>
  132.             <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153457zj2mtzcs40jtt2jt.jpg"></a>
  133.             <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153457t8loc5d5loylc6cg.jpg"></a>
  134.             <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153456zetzcexkk0npknnn.jpg"></a>
  135.         </div>
  136.         <div id="dot">

  138.                 <span index="1"class="on"></span>
  139.                 <span index="2"></span>
  140.                 <span index="3"></span>
  141.                 <span index="4"></span>
  142.                 <span index="5"></span>

  144.         </div>
  145.     </div>
  146. </body>
  147. </html>

复制代码

演示地址：HTTP://WWW.W3CFUNS.COM/BLOG-5441648-5402124.HTML 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/White-Quality/p/4103798.html