js实现左右无缝轮播图

今天让我们再来做一个左右无缝的轮播图吧！

一、准备html代码

html代码也叫结构

<!DOCTYPE html>
<html lang="zh-CN"><head><title></title><meta charset="UTF-8"></head><body>              <div>                                         <!-- 用来做显示窗口的div --><header>                                  <!--都用div的话就不好的区分的--><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/1.jpg" alt="">      <!--这里把第一张图在最后也放一张--></header><button> > </button><button> < </button>  <!--左右滑动的按钮-->     <ul>                                      <!--这里是用于显示当前的点点--><li></li><li></li><li></li><li></li></ul></div>      </body>
</html>

这是目前的效果姑且还是给你们看看，img是行内块元素是和div是块级元素,区别是行内块是可以设置宽高，也不会单个占一整行，而div是会自己占一整行的，当然也可设置宽高

二、css代码

css代码也叫表现

*{margin:0;padding:0;
}
body{width: 100vw;                       /*设置body的宽度占满屏幕*/height:100vh;display:flex;                       /*居中*/align-items:center;justify-content: center;
}
div{position: relative;width:730px;                       /*这个div是用来显示的最好和图片宽高一样*/height: 454px;border:5px solid orange;}
header{width: 3850px;height: 454px;position: relative;                 /*开启偏移的设置*/
}
button{                                 /*设置button 左右按钮的设置*/width: 35px;height: 35px;border:none;background: rgba(0,0,0,0.7);    position: absolute;color:white;
}
button:last-of-type{                    /*向后的按钮位置*/top:50%;transform: translateY(-50%);
}
button:first-of-type{                   /*向前的按钮位置*/top:50%;right: 0;transform: translateY(-50%);
}
ul{width: 80%;height: 100px;position: absolute;bottom:0;left: 50%;transform: translateX(-50%);
}
li{                                         /*小圆点是通过li的默认样式*/width: 25%;height: 100%;list-style: circle inside;               /*让li的小圆点居中*/ line-height: 160px;float: left;text-align: center;font-size:22px;color:yellow;
}
li:first-of-type{                        /*第一个li默认选中所以为实心圆*/list-style-type: disc;
}

如果你想让li的小圆点居中必须要设置list-style-position:inside和text-align:center意思是小圆点位置为内部然后文本居中，少一个都不行

你现在看到是这样,有黄色边框的是显示区域,我这么做是为了让你们看明白，你想他要是移动要移动谁，怎么移动，当然是显示区域不懂，后面的图片一直滑动不就成了一个滑动轮播图了。

1、小问题
看到没这个图片之间有一点缝隙了没有,明明我没有写margin和padding就算写了我也清除了默认样式啊，原因是img是行内块就是inline-black所以每次结束有一个空格

2、解决方案
我们直接把它改为块就解决问题了display:block

img{position: relative;          /*配合z-index使用*/display: block;              /*解决缝隙问题*/float: left;              /*通过浮动让他们显示为一行*/z-index: -1;                /*下降层级不能遮住按钮*/
}

这就是解决完了的样子，好了开始js代码

三、js代码

js代码也叫行为

window.onload=() => {                             //设置最后加载js代码var header=document.querySelector("header");  //获取对应的元素 var div=document.querySelector("div");        //queryselect是es5新出的和jq的用法一样var buttons=document.querySelectorAll("button");var index=0;                                  //翻滚的页码值var timeout;var lis=document.querySelectorAll("li");      //获取所有的li返回的是一个数组形式buttons[0].onclick=() =>{                     //向前按钮move(++index)}buttons[1].onclick=() =>{                      //向后按钮move(--index)}function move(idx){var offleft,showW;console.log(idx)clearInterval(timeout)timeout = setInterval(function(){               //缓慢移动offleft=header.offsetLeft;                 //总偏移值showW=(-idx*div.clientWidth-offleft)/10    //每次偏移值if(showW>0){                               //把数值向上走showW=Math.ceil(showW)}else{showW=Math.floor(showW)}header.style.left=(offleft+showW)+"px";     }, 30);}
}

就是这样的一个原理

那么如何达到无缝轮播了

if(index>4){                      index=1;                       header.style.left=0+"px";
}else if(index<0){index=3;header.style.left=-lis,length*div.clientWidth+"px";
}

其实这这里有一点视觉上的问题，当页码到达最大值时，我把显示的图片切换为第二张，然后起始值从零开始，切换到最开始是瞬间完成的，我们末尾的一张会有移动的效果，然后瞬间到一开始，我们肉眼无法察觉，所以会有一种移动了的效果。当然页码到最小值时还向前进的话，也是一样的。

四、完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<style>*{margin:0;padding:0;}body{width: 100vw;                       /*设置body的宽度占满屏幕*/height:100vh;display:flex;                       /*居中*/align-items:center;justify-content: center;}div{position: relative;overflow:hidden;                 /*！！！隐藏超出的部分*/min-width: 730px;max-height: 454px;width:730px;                       /*这个div是用来显示的最好和图片宽高一样*/height: 454px;border:2px solid orange;}header{width: 3650px;height: 454px;position: relative;                 /*开启偏移的设置*/left: 0;}button{                                 /*设置button 左右按钮的设置*/width: 35px;height: 35px;border:none;background: rgba(0,0,0,0.7);    position: absolute;color:white;}button:last-of-type{                    /*向后的按钮位置*/top:50%;transform: translateY(-50%);    }button:first-of-type{                   /*向前的按钮位置*/top:50%;right: 0;transform: translateY(-50%);}ul{width: 80%;height: 100px;position: absolute;bottom:0;left: 50%;transform: translateX(-50%);}li{                                         /*小圆点是通过li的默认样式*/width: 25%;height: 100%;list-style-type: circle;list-style-position: inside;               /*让li的小圆点居中*/ line-height: 160px;float: left;text-align: center;font-size:22px;color:yellow;}li:first-of-type{                        /*第一个li默认选中所以为实心圆*/list-style-type: disc;}img{position: relative;display: block;float: left;z-index: -1;width: 730px;height: 454px;}</style>
<script>window.onload=() => {                             //设置最后加载js代码var header=document.querySelector("header");  //获取对应的元素 var div=document.querySelector("div");        //queryselect是es5新出的和jq的用法一样var buttons=document.querySelectorAll("button");var index=0;                                  //翻滚的页码值var timeout;var lis=document.querySelectorAll("li");      //获取所有的li返回的是一个数组形式buttons[0].onclick=() =>{                     //向前按钮move(index++)}buttons[1].onclick=() =>{                      //向后按钮move(index--)}var newtime=setInterval(buttons[0].onclick, 2000);div.onmouseout=() =>{newtime=setInterval(buttons[0].onclick, 2000);}div.onmouseover=()=>{clearInterval(newtime)}for(i in lis){                                  //小圆点点击事件lis[i].index=i                              //记录下标值lis[i].onclick=function(){    circle(this.index)move(this.index)index=this.index// this.style.listStyleType="square"}}function circle(num){if(num==4){num=0;}for(i of lis){i.style.listStyleType="circle"}lis[num].style.listStyleType="disc"}function move(){var offleft,showW;clearInterval(timeout)timeout = setInterval(function(){               //缓慢移动if(index>4){index=1;header.style.left=0+"px";  }else if(index<0){index=3;header.style.left=-(lis.length)*div.clientWidth+"px";  }offleft=header.offsetLeft;                 //总偏移值showW=(-index*div.clientWidth-offleft)/10    //每次偏移值if(showW>0){                               //把数值向上走showW=Math.ceil(showW)}else{showW=Math.floor(showW)}circle(index);offleft=offleft+showWheader.style.left=offleft+"px";     if(showW==0){clearInterval(timeout)}}, 30);}
}
</script>
</head>
<body>
<div>                                         <!-- 用来做显示窗口的div -->
<header>                                  <!--都用div的话就不好的区分的--><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/1.jpg" alt="">      <!--这里把第一张图在最后也放一张-->
</header>
<button> > </button><button> < </button>  <!--左右滑动的按钮-->
<ul>                                      <!--这里是用于显示当前的点点--><li></li><li></li><li></li><li></li>
</ul>
</div>
</body>
</html>

展开只是为了让你们看的明白，给最大的父容器div 加上一条 overflow:hidden把超出的部分隐藏了就好了

五、总结

其实没有什么难的，只要思路畅通剩下的就只有把他拼接起来了，最核心的地方就在move()这个函数里面，还有一种轮播图，是一种深入浅出的，我讲讲思路，首先还是把html和css代码写的和我上面一样，然后给图片加上就是img 加上 position:absolute让他们爹叠加在一起，最后可以通过z-index或者opacity这个两个属性调整，这样一想深入浅出的那种还容易一点，对不对啊!