轮播图效果如下：
轮播图实现方式：通过定位的方式，改变left的值，形成轮播图的效果（也可以是从上到下翻滚的，改变top或（bottom））
需要准备的素材：
1、轮播图片任意
2、左右移动箭头
轮播图的制作方法：
第一步创建三个文件
.html文件， .css文件, .js文件
在创建一个img文件夹用来放图片
我这里的文件名字：轮播图.html 轮播图.css 轮播图.js（文件名最好是英文）
第二步：通过html把框架搭好：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="轮播图.css">
<script src="./轮播图.js" defer></script>
<style>
.imgdiv ul li img{
/* 图片大小 */
width: 1024px;
height:420px;
}
</style>
</head>
<body>
<div class="imgdiv" style="width: 1024px; height: 420px;">
<ul style="left: 0;">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
</ul>
<span class="lf"><img src="./img/左箭头.png" alt=""></span>
<span class="rf"><img src="./img/右箭头.png" alt=""></span>
</div>
</body>
</html>注意的点：1、script标签引外部js时，加上defer（加载完成html后，在加载js），避免获取不到元素的情况。
2、js获取外部css样式修改的时候，也就是没有在html文件里的样式，有可能js获取不到，所以上面代码中需要改变的left值，还有图片还有外部盒子的宽度，我都写在了html里，也方便了如果图片大小改变时，只需要修改html文档就好，css和js代码都不需要动
上面代码运行结果：我这里准备了四张图片（读者想用几张都可以）
第三步：写css样式
1，写css把图片横向布局，并且通过overflow：hidden的方式把外面的图片隐藏
2，给ul设置定位，并把left设置为0px;也就是向左偏移为0
（如果是上下轮播，图片纵向布局，top为0px）
代码示例：（动画效果显示；在父级上ul上加上：transition动画效果。）
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.imgdiv{
margin: 200px auto 0;
overflow: hidden;
position:relative;
}
.imgdiv ul{
display:flex;
transition: left 1s linear;/*动画效果*/
position:absolute;
}
.imgdiv span{
cursor:pointer;
}
.imgdiv span.lf{
position: absolute;
left: 10px;
}
.imgdiv span.rf{
position: absolute;
right: 10px;
}
.imgdiv>div{
margin: 0 auto;
position: absolute;
left:0;
bottom:20px;
display: flex;
}
.newsdiv{
width: 0;
height: 0;
border: 10px solid rgb(139, 138, 138);
border-radius: 50%;
margin:0 20px;
cursor:pointer;
opacity: 0.3;
}上述代码中的下面这两段代码：是给下面放小圆点盒子与小圆点样式的。在js中根据图片个数动态创建小圆点
.imgdiv>div{
margin: 0 auto;
position: absolute;
left:0;
bottom:20px;
display: flex;
}
.newsdiv{
width: 0;
height: 0;
border: 10px solid rgb(139, 138, 138);
border-radius: 50%;/*正方形变成圆形*/
margin:0 20px;
cursor:pointer;/*鼠标放上去变成小手*/
opacity: 0.3;/*初始透明度，通过js修改透明度，来修改其高亮*/
}效果如图：
第四步;通过写js来改变图片的left值，使其动态显示。
js：
1、使左右两个图片居中，根据图片的高度，（图片高度-箭头高度）/2
// 设置左右按钮居中
lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';2、根据图片个数，创建小圆点的个数
// 跟随图片的个数,动态设置圆点的个数
newsbigdiv=document.createElement('div');
newsbigdiv.className='newsbigdiv';
pop.appendChild(newsbigdiv);
// 循环创建子div,给每个子div一个class样式,加一个索引
for(var i=0;i<lengthLi;i++){
newsdiv=document.createElement('div');
newsbigdiv.appendChild(newsdiv);
newsdiv.className="newsdiv";
newsdiv.setAttribute('index',i);//给每个子div设置一个索引值
}
// 获取圆点div个数,让其左偏移,居中显示
var divsv = newsbigdiv.querySelectorAll('div');
newsbigdiv.style.left=(content_width-divsv.length*60)/2+'px';
// 默认第一个为高亮
divsv[0].style.opacity=1;3、改变left值使图片位置发生变换
做法：
num为0 的时候left为0（第一张图） num为1的时候left为负的图片宽度（第二张图） num为2的时候left为负的2倍图片宽度（第三张图）
// 设置全局累加器，判断动到哪一张图片**************
var num=0;
具体代码：（因为是向左移动，所以left为负值（负号别忘了加）根据num的值的变化，来改变图片的left值）
function change(){
// 把所有圆点样式透明设置为0.3
for(var j=0;j<lengthLi;j++){
divsv[j].style.opacity=0.3;
}
// 给当前索引为num的图片改变圆点高亮显示
divsv[num].style.opacity=1;
indexUl.style.left=-num*content_width+'px';
}4、给两个箭头绑定点击事件
lfspan.onclick=function(){
num--;
if(num==-1){
num=lengthLi-1;
}
change();
}
rfspan.onclick=function(){
num++;
if(num==lengthLi){
num=0;
}
change();
}5、给下面的圆点绑定点击事件
for(var i=0;i<lengthLi;i++){
divsv[i].οnclick=function(){
num=this.getAttribute(‘index’);
change();
}
}6、设置计时器（第一个参数为，右点击函数，第二个参数为几秒执行一次）
timer=setInterval(rfspan.onclick,TIME);7、鼠标移入移出事件（移入图片计时器停止轮播结束，移出图片计时器开始轮播继续）
// 当鼠标放在图片上时,清除定时器
pop.onmouseover=function(){
clearInterval(timer);
}
// 鼠标离开定时器时,开启定时器
pop.onmouseout=function(){
timer=setInterval(rfspan.onclick,TIME);
}js详细代码：
var indexUl = document.querySelector(".imgdiv>ul");
// li标签
var indexLi=indexUl.querySelectorAll("li");
var lengthLi =indexLi.length;
// 最大的div
var pop = document.querySelector(".imgdiv");
var lfspan=pop.querySelector('.lf');
var rfspan=pop.querySelector('.rf');
// 设置左右按钮居中
lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
// 初始化,获得显示框的宽度
var content_width=parseInt(pop.offsetWidth);
const TIME=2000;
var timer;
// 设置全局累加器，判断动到哪一张图片**************
var num=0;
// 跟随图片的个数,动态设置圆点的个数
newsbigdiv=document.createElement('div');
newsbigdiv.className='newsbigdiv';
pop.appendChild(newsbigdiv);
// 循环创建子div,给每个子div一个class样式,加一个索引
for(var i=0;i<lengthLi;i++){
newsdiv=document.createElement('div');
newsbigdiv.appendChild(newsdiv);
newsdiv.className="newsdiv";
newsdiv.setAttribute('index',i);//给每个子div设置一个索引值
}
// 获取圆点div个数,让其左偏移,居中显示
var divsv = newsbigdiv.querySelectorAll('div');
newsbigdiv.style.left=(content_width-divsv.length*60)/2+'px';
// 默认第一个为高亮
divsv[0].style.opacity=1;
function change(){
// 把所有圆点样式透明设置为0.3
for(var j=0;j<lengthLi;j++){
divsv[j].style.opacity=0.3;
}
// 给当前索引为num的图片改变圆点高亮显示
divsv[num].style.opacity=1;
indexUl.style.left=-num*content_width+'px';
}
for(var i=0;i<lengthLi;i++){
divsv[i].onclick=function(){
num=this.getAttribute('index');
change();
}
}
lfspan.onclick=function(){
num--;
if(num==-1){
num=lengthLi-1;
}
change();
}
rfspan.onclick=function(){
num++;
if(num==lengthLi){
num=0;
}
change();
}
timer=setInterval(rfspan.onclick,TIME);
// 当鼠标放在图片上时,清除定时器
pop.onmouseover=function(){
clearInterval(timer);
}
// 鼠标离开定时器时,开启定时器
pop.onmouseout=function(){
timer=setInterval(rfspan.onclick,TIME);
}。。。。。。。。。。。。轮播图完成。。。。。。。。。。。
待优化：不能从最后一张直接动画成第一张，第一张不能直接动画成最后一张
具体实现
比如四张图片轮播，在第一张图片的前面有第四张图片，在第四张图片的后面有第一张图片
用数字表示 4（1 2 3 4）1
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
