JavaScript实现无缝轮播图效果

通过原生js实现无缝轮播效果。

思路：

1.利用html+css完成轮播图片，按钮，底部小点的整体效果的布局。

2.通过原生js完成图片轮播，无缝自动切换，底部小点随图片切换而切换。

步骤1：

建立无缝轮播的HTML的基本布局

html部分：

<div id="slider">
        <!-- 图片部分 -->
        <ul class="slider-list">
            <!-- <li><a href="#"><img src="./img/5.jpg"></a></li> -->
            <li><a href="#"><img src="./img/1.jpg"></a></li>
            <li><a href="#"><img src="./img/2.jpg"></a></li>
            <li><a href="#"><img src="./img/3.jpg"></a></li>
            <li><a href="#"><img src="./img/4.jpg"></a></li>
            <li><a href="#"><img src="./img/5.jpg"></a></li>
            <li><a href="#"><img src="./img/1.jpg"></a></li>
        </ul>
         <!-- 小点部分 -->
       <div class="dot-list">
        <span class="dot cur"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
    <!--箭头布分 -->
    <a href="#" class="arraw prev" id="left">
        <span></span>
    </a>
    <a href="#" class="arraw next" id="right">
     <span></span>
 </a>
        
    </div>

html代码中分为个部分：

1.图片部分。

2.小点部分，这里用的是span标签，也可以用其他标签，能实现小点效果就行。

3.箭头部分。

步骤2：

css部分

/* 主体部分 */
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 680px;
    height: 340px;
}
#slider{
   position: relative;
    width: 680px;
    height: 340px;
    margin: 100px auto;
    /* outline: 2px solid red; */
    overflow: hidden;
}
.slider-list{
    display: flex;
    position: relative;
    left: 0px;
    width: 100%;
    height: 100%;
    /* transform: translateX(-680px); */
    transition: all 1s;
}
.slider-list li{
    width: 680px;
    height: 340px;
}
/* 小点部分 */
.dot-list{
   position: absolute;
   bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .3);
}
.dot-list .dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
}
.dot-list .dot.cur{
    background-color: red;
}
/*箭头部分  */
.arraw{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.795);
    display: none;
}
.prev{
    left: 0;
}
.next{
    right: 0;
}
.arraw span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%,50%);
    width: 10px;
    height: 10px;
    border-bottom:2px solid white;
    border-left:2px solid white;
}
.prev span{
    transform: translate(-50%,-50%) rotate(45deg);
}
.next span{
    transform: translate(-50%,-50%) rotate(-135deg);
}
#slider:hover .arraw{
    display: block;
}

完成html+css代码后，效果图如下：

注意这里的效果图为了方便演示，取消了css代码中.arraw{ display: none;}。

步骤3：

通过原生js实现自动无缝轮播效果

js代码：

 var slid =document.getElementById('slider');
    var slidLis=slid.getElementsByTagName('ul')[0];
    // var slidLis=document.querySelector(".slider-list")
    var slidLi=slidLis.getElementsByTagName('li');

    var lef = document.getElementById('left');
    var righ = document.getElementById('right');
    
    var index = 0;
    function lun(){
       index++;
        circe();
       slidLis.style.left=index*-680 + "px";
       slidLis.style.transition="all 1s";
       if(index === 5){
		   index= 0;
           setTimeout(function(){
               slidLis.style.left=0;
               slidLis.style.transition="none";
           },1000)
       }
       circe();
    }
    righ.addEventListener("click",lun);
    lef.addEventListener("click",function(){
        index--;
        if(index === -1){
            slidLis.style.left=5*-680 + "px";
            slidLis.style.transition="none";
			 index = 4;
            setTimeout(function(){
                slidLis.style.left=index*-680 + "px";
            slidLis.style.transition="all 1s";
            },0);  
        }else{
            slidLis.style.left=index*-680 + "px";
        }
        circe();
    });
//  自动轮播
var autoplay = setInterval(lun,2000);
slid.addEventListener("mouseenter",function(){
	clearInterval(autoplay);
});
slid.addEventListener("mouseleave",function(){
	clearInterval;
	autoplay = setInterval(lun,2000);
})

//小圆点

var dotList = document.getElementsByTagName('span');
function circe(){
    for(var i = 0;i < dotList.length;i++){
          if(i === index){
              dotList[i].classList.add("cur");
          }else{
            dotList[i].classList.remove("cur"); 
          }
    }
}

 效果如下：

以上无缝轮播的难点主要是：当从最后一张图片切换到第一张图片，过渡效果的处理。

上面代码是通过在html代码上，在最后一张图片后在增加一张与第一张相同的图片（假的第一张图片），当轮播要从最后一张切换到第一张时，实则先过渡到我们设的假的第一张图片，然后在过渡结束后立刻切换真正的第一张。这里的我们需要设置一个setTimeout();时间为我们设置的过渡时间一样，因为我们需要等待过渡结束时，在设置transition:"none";。