8. js实现PC轮播图（banner）

1. 图片大小为721*455

2. css

    *{
       padding:0;
        margin: 0;
    }
    ul{
        list-style: none;
    }
    ol{
        list-style: none;
    }
    img{
        vertical-align: bottom;
    }
    .banner_box{
        text-align: center;
        position:relative;
        width:721px;
        height: 455px;
        margin:100px auto;
        background-color: pink;
       overflow: hidden;
    }
    .banner_box .banner_list{
        position: absolute;
        top:0;
        left: 0;
    }
    .banner_box .banner_list li{
        float: left;
        cursor: pointer;
    }
    .banner_box .banner_dot{
        position:absolute;
        bottom: 10px;
        width: 721px;
    }
    .banner_box .banner_dot li{
        margin-right: 10px;
        border:1.5px solid #fff;
        border-radius: 50%;
        height: 10px;
        width: 10px;
        display: inline-block;
        cursor: pointer;
    }
    .banner_box .banner_dot li.active{
        background-color: #fff;
    }
    .banner_box .banner_pre, .banner_box .banner_next{
        height: 40px;
        width: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 22px;
        position:absolute;
        top:50%;
        margin-top:10px;
        line-height: 40px;
        color: #fff;
        /*display: block;*/
        cursor: pointer;
        display: none;
    }
    .banner_box .banner_pre{
        left: 0;
    }
    .banner_box .banner_next{
        right: 0;
    }
    .banner_box:hover .banner_pre, .banner_box:hover .banner_next{
        display: block;
    }
   

3. html

   <div class="banner_box">
       <ul class="banner_list">
           <li><img src="./img/focus1.jpg" alt=""></li>
           <li><img src="./img/focus2.jpg" alt=""></li>
           <li><img src="./img/focus3.jpg" alt=""></li>
           <li><img src="./img/focus4.jpg" alt=""></li>
       </ul>
       <ol class="banner_dot">
           
       </ol>
       <span class="banner_pre">&lt;</span>
       <span class="banner_next">&gt;</span>
   </div>
   

4. js

   window.addEventListener('load', function(){
   
           //让小圆点的个数与图片的个数保持一致,并实现点击小圆点，切换到响应的图片
           //parentEle圆点的父元素的框，number是小圆点的个数
           function createBannerDot(parentEle, number, bannerListEle, bannerWidth){
               for(var i = 0; i < number; i++){
                   var li = document.createElement('li');
                   if(i == 0){
                       li.className = 'active';
                   }
                   li.setAttribute('data-index', i);
                   li.addEventListener('click', function(){
                       var index = this.getAttribute('data-index');
                       nowImgIndex = parseInt(index) + 1;
                       nowDotindex = parseInt(index) ;
                       switchImg(bannerListEle, bannerWidth, parseInt(index) + 1, true);
                       //给当前点击的小圆点添加样式
                       addDotClass(parentEle, index);
                   });
                   parentEle.appendChild(li);
               }
           }
   
           //实现切换到第i张的功能
           //bannerListEle存放所有图片的框,i切换到第i张
           function switchImg(bannerListEle, bannerWidth, i){  
               animation(bannerListEle, -bannerWidth * i, function(){ flag = true;});  
           }
           //给parentEle的第n个小圆点添加背景样式
           function addDotClass(parentEle, n){
               for(var j = 0; j < parentEle.children.length; j++){
                   parentEle.children[j].className = '';
               }
               parentEle.children[n].className = 'active';
           }
   
           //克隆图片列表的第一个图片和最后一个图片
           function imgClone(bannerListEle, bannerWidth){
               var fitstChild = bannerListEle.firstElementChild.cloneNode(true);
               var lastChild = bannerListEle.lastElementChild.cloneNode(true);
               bannerListEle.appendChild(fitstChild);//在轮播图的最后边插入第一张图片
               bannerListEle.insertBefore(lastChild, bannerListEle.children[0]);//在轮播图的最前边插入第一张图片
               //克隆好后，让原来的第一张还是第一张
               bannerListEle.style.left = -bannerWidth + 'px';
           }
           //动画效果
           //obj要移动的元素，tager移动距离，callback动画执行结束后的回调函数
           function animation(obj, tager, callback){   //该效果可以用css实现
               clearInterval(obj.timer);
               obj.timer = setInterval(function(){
                   var step = (tager - obj.offsetLeft) / 10;
                   step = step < 0 ? Math.floor(step) : Math.ceil(step);
                   //console.log(tager);
                   if(obj.offsetLeft == tager){
                       clearInterval(obj.timer);
                       callback && callback();//当动画执行完毕时，调用回调函数
                   }else{
                       obj.style.left = obj.offsetLeft + step +'px';
                   }
                  
               }, 15);
           }
   
           var bannerBox = document.querySelector(".banner_box");
           var bannerWidth = bannerBox.offsetWidth;    //获取banner框的宽度
           var bannerDot = document.querySelector(".banner_dot");
           var bannerList = document.querySelector(".banner_list");
           var banneDot = document.querySelector(".banner_dot");
           //创建小圆点，并添加点击效果
           createBannerDot(bannerDot, bannerList.children.length, bannerList, bannerWidth);
           //克隆第一张和最后一张图片
           imgClone(bannerList, bannerWidth);
           var liList = bannerList.querySelectorAll("li");
           bannerList.style.width  = bannerWidth * (liList.length) +'px';
           //点击右侧按钮实现轮播图的下一张
           var bannerNext = document.querySelector(".banner_next");
           //当前小圆点的索引号
           var nowDotindex = 0;
           //当前图片的索引号
           var nowImgIndex = 1;
           //节流阀，避免点击过快
           var flag = true;
          
           bannerNext.addEventListener('click', function (){
               if(flag){
                   flag = false;
                   nowDotindex ++;     
                   nowImgIndex ++;         
                   if(nowDotindex >= banneDot.children.length){
                       nowDotindex = 0;
                   }  
                   if(nowImgIndex >= bannerList.children.length){ //到达最后一个图片时,调整位置
                       bannerList.style.left = -bannerWidth +'px';
                       nowImgIndex = 2;
                   }   
                   switchImg(bannerList, bannerWidth, nowImgIndex);   
                   addDotClass(bannerDot, nowDotindex);
               }
               
           });
           //点击左侧按钮实现轮播图的上一张
           var bannerPre = document.querySelector(".banner_pre");
           bannerPre.addEventListener('click', function (){
               if(flag){
                   flag = false;
                   nowDotindex--; 
                   nowImgIndex--;     
                   if(nowDotindex < 0){
                       nowDotindex = banneDot.children.length - 1;
                   }  
                   if(nowImgIndex < 0){ //到达最后一个图片时
                       bannerList.style.left = -bannerWidth * (bannerList.children.length - 2) +'px';
                       nowImgIndex = bannerList.children.length - 3;
                   }        
                   
                   switchImg(bannerList, bannerWidth, nowImgIndex);  
                   addDotClass(bannerDot, nowDotindex);
               }
   
              
           });
   
           //自动轮播
           var timer = null;
           function autoLoop(){
               clearInterval(timer);
               timer = setInterval(function(){
                   bannerNext.click();
               }, 1000);
           }
          autoLoop();
   
           //鼠标放上去实现暂停效果
           bannerBox.addEventListener("mouseenter", function(){
               clearInterval(timer);
           });
           bannerBox.addEventListener("mouseleave", function(){
               autoLoop();
           });
       });