原生js做轮播

HTML代码:
<
div id="scroll" class="scroll"> <div id="box" class="box"> <ul id="ul"> <li><img src="image/1.png" width="500" height="200"></li> <li><img src="image/2.png" width="500" height="200"></li> <li><img src="image/3.png" width="500" height="200"></li> <li><img src="image/4.png" width="500" height="200"></li> <li><img src="image/5.png" width="500" height="200"></li> </ul> <!--<ol id="ol"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol>--> </div> </div>
css代码:
<style type="text/css"> *
{ margin: 0px; padding: 0px; } ul,ol{ list-style: none; } img{ vertical-align: top; } .scroll{ width: 500px; height: 200px; margin: 100px auto; border: 1px solid #ccc; padding: 7px; overflow: hidden; position: relative; } .box{ width: 500px; height: 200px; position: relative; overflow: hidden; } .box ul{ width: 600%; position: absolute; left: 0px; top: 0px; } .box ul li{ float: left; } .scroll ol{ position: absolute; bottom: 10px; right: 10px; } .scroll ol li{ float: left; width: 20px; height: 20px; background: pink; border-radius: 50%; text-align: center; margin-left: 10px; cursor: pointer; } .scroll ol li.current{ background: purple; } </style>

js代码:

<script type="text/javascript">
            //数字下标并非写死,是根据图片张数自动生成
              var scroll = document.getElementById('scroll');//获得大盒子
              var ul = document.getElementById('ul');//获得ul
              var ulList = ul.children;//获得ul下的li
              var listWidth = ul.children[0].offsetWidth;
              //克隆一张图片并放在最后一张
              ul.appendChild(ul.children[0].cloneNode(true));
              //生成ol小圆点
              var ol = document.createElement('ol');
              //追加到scroll 里面
              scroll.appendChild(ol);
              
              for(var i = 0;i<ulList.length-1;i++){
                  var li = document.createElement('li');
                  li.innerHTML = i+1;
                  //把li追加到ol里面
                  ol.appendChild(li);
              }
              var olList = ol.children;
              //当前颜色加一个类名
              ol.children[0].className = "current";
              
              
              //动画函数
              function animate(obj,target){
                  //清除定时器
                   clearInterval(obj.timer);
                   var speed = obj.offsetLeft<target ? 15: -15;
                   obj.timer = setInterval(function(){
                       var result = target - obj.offsetLeft;//差值不会超过speed
                       obj.style.left = obj.offsetLeft + speed +"px";
                       //有可能会出现小数点,这里要做判断
                       if(Math.abs(result) <= Math.abs(speed)){
                           clearInterval(obj.timer);
                           obj.style.left = target +"px";
                       }
                   },10);
               }
              
              //开始写轮播逻辑
              var timer = null;// 轮播图的定时器
              var key = 0;//控制播放的张数
              var circle = 0;//控制小圆点
             
              //轮播函数
              timer = setInterval(autoplay,2000);
              function autoplay(){
                  key++;
                  if(key > ulList.length - 1){
                      ul.style.left = 0;
                      key = 1;
                  }
                  animate(ul,-key*listWidth);
                  circle++;
                  if(circle > olList.length - 1){
                      circle = 0;
                  }
                  for(var i = 0;i<olList.length;i++){
                      olList[i].className = "";
                  }
                  olList[circle].className = "current";
              }
             
              
        </script>

根据这些代码运行出来的效果是这样的:

posted @ 2018-06-15 15:50  阳光下的三叶草  阅读(112)  评论(0编辑  收藏  举报