原生js实现无缝滚动轮播图-点击页码即刻显示该页码的内容

演示地址：http://runjs.cn/detail/zk1oarmm

前几天发布了一个轮播图实现的版本，并不是当时面试官的要求，今天有时间整理了轮播图实现的另一种思路：

       动态改变父元素中的内容，设置父元素身上的left值，实现切换效果！

 

html:

 <div class="container" id="container">
        <div id="btn-prev" class="btn-ctrl">&lt;</div>
        <div id="btn-next" class="btn-ctrl">&gt;</div>
        <ul id="inner-list">
            <li ><img src="images/head1.jpeg" alt=""/></li>
        </ul>
        <ul id="dot-list">

        </ul>
    </div>

View Code

 

css:

 <style>
        *{margin: 0px;padding: 0px}
        #container{
            margin-left: 200px;
            width: 400px;
            height:400px;
            position: relative;
            overflow: hidden;
        }
        #inner-list{
            width: 800px;
            position: absolute;
            top: 0;
            left: 0;
        }
        #inner-list li{
            float: left;width: 400px;
        }
        #inner-list li img{
            width: 100%;
        }
        #dot-list{
            position: absolute;
            bottom:20px;
            right:20px;

        }
        #dot-list li{float: left;display: inline-block;
            width: 20px;height:20px;border-radius: 50%;line-height: 20px;text-align: center;
            background: rgba(255,255,255,.3);cursor: pointer;margin-right: 10px;
        }

        #dot-list li.cur{
            background: rgba(255,255,255,.6);
        }

        .btn-ctrl{
            position: absolute;cursor: pointer;
            top: 50%;
            font-size: 36px;
            color: red;
            font-weight: 500;z-index: 2;
        }
        #btn-prev{
            left: 0px;
        }
        #btn-next{
            right: 0px;
        }
    </style>

View Code

 

js:

 window.onload = function(){
       var eleInners = document.getElementById('inner-list'),
               eleDots = document.getElementById('dot-list'),
               liImgs = eleInners.getElementsByTagName('li'),
               liDots = eleDots.children,
               elePrev = document.getElementById('btn-prev'),
               eleNext = document.getElementById('btn-next'),
               TIME_DURATION = 3000,
               interval = null,
               index = 0,
               circle = 0;
      var contents = [
          {url:'images/head1.jpeg'},
          {url:'images/head2.jpeg'},
          {url:'images/head3.jpeg'}
      ];
       for(var i= 0,len = contents.length;i<len;i++){
           var li = document.createElement('li');
           li.innerHTML = i + 1;
           eleDots.appendChild(li)
       }
       //第一个点高亮
       liDots[0].className = 'cur';
       //重置dot高亮
       function resetDot(circle){
           for(var i= 0,len = contents.length;i<len;i++){
               liDots[i].className = ''
           }
           liDots[circle].className = 'cur';
       }
       //移动动画
       function animate(obj,targetplace,forward){
           clearInterval(obj.timer)
           obj.timer = setInterval(function(){
               var speed = obj.offsetLeft > targetplace  ?-10:10;
               var result = targetplace - obj.offsetLeft;
               if(Math.abs(result) > speed){
                   obj.style.left = obj.offsetLeft + speed + 'px';
               }else{
                   obj.style.left = targetplace
                   clearInterval(obj.timer)
                   if(forward){
                       obj.removeChild(obj.children[1]);
                   }else{
                       obj.removeChild(obj.children[0]);
                   }

                   obj.style.left = 0;

               }

           },10)
       }
       function autoplay(){
           index ++ ;
           if(index >= contents.length){
               index = 0;
           };
           var nextLi = document.createElement('li');
           var nextImg = document.createElement('img');
           nextImg.src = contents[index].url;
           nextLi.appendChild(nextImg);
           eleInners.appendChild(nextLi);
           animate(eleInners,-400,false);
           //然后
           circle++;
           if(circle > contents.length-1){
               circle = 0
           }
           //点的高亮reset
           resetDot(circle)

       }
       //回退
       function moveright(){
           index--;
           eleInners.style.left = - 400 + 'px';
           if(index <0){
               index = contents.length -1;
           }
           var nextLi = document.createElement('li');
           var nextImg = document.createElement('img');
           nextImg.src = contents[index].url;
           nextLi.appendChild(nextImg);
           eleInners.insertBefore(nextLi,eleInners.firstChild);
           animate(eleInners,0,true);
           circle --;
           if(circle < 0){
               circle = contents.length - 1;//circle回到最后一个点
           }
           resetDot(circle);
       }
       interval = setInterval(autoplay,TIME_DURATION);

       eleDots.addEventListener('click',function(event){
           clearInterval(interval);
           var target = event.target;
           var currentTarget = event.currentTarget;
           oldCircle = circle;
           index = target.innerHTML - 0 - 1;
           circle = index;
           //点的高亮reset
           resetDot(circle);
          //如果是从右边点击
           var nextLi = document.createElement('li');
           var nextImg = document.createElement('img');
           nextImg.src = contents[index].url;
           nextLi.appendChild(nextImg);
           //如果向后切图
           if(oldCircle < circle){
               eleInners.appendChild(nextLi);
               animate(eleInners,-400,false);
               //如果是往前进行了切图
           }else if(oldCircle > circle){
               eleInners.insertBefore(nextLi,eleInners.lastChild);
               eleInners.style.left = -400 + 'px';
               animate(eleInners,0,true);
           }else if(oldCircle == circle){
               circle = oldCircle;
           }
       });
       //        鼠标移入，清除定时器
       eleInners.addEventListener('mouseenter',function(event){
           clearInterval(interval)
       });
       //        鼠标移出，开启定时器
       eleInners.addEventListener('mouseleave',function(event){
           interval = setInterval(autoplay,3000)
       });

       elePrev.addEventListener('click',function(event){
           clearInterval(interval)
           moveright();
           interval = setInterval(autoplay,3000)
       })
       eleNext.addEventListener('click',function(event){
           clearInterval(interval)
           autoplay();
           interval = setInterval(autoplay,3000)
       })
   }

 

转载于:https://www.cnblogs.com/lizimeme/p/8640745.html