开门见山，今天要实现的轮播效果如下图所示：(轮播自动播放；点击左右按钮实现上一张和下一张的功能；鼠标移入轮播暂停；鼠标移出轮播自动播放；小圆点随着图片的变化而变化，点击哪个小圆点回到哪张图片；底部显示第几张图片)

一、献上html及css

html:

<div class="pic"> <!--上一页--> <a id="prev" href="javascript:;"></a> <!--轮播图--> <img id="img" src="img/img1.jpg" alt=""> <!--小圆点--> <div class="circle"> <span class="active"></span> </div> <!--下一页--> <a id="next" href="javascript:;"></a> </div> <p id="txt">这是第 <span>1</span> 张图片</p>

css:

*{

margin: 0; padding: 0;

}
a{

text-decoration: none;

}
.wrap{

width: 1000px; height: 800px; background: url(img/bg.jpg) no-repeat; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-size: 100% 100%;

}

prev,#next{

position: absolute; width: 25px; height: 45px; background: url(img/ar.png) no-repeat; top: 155px;

}

prev{

left: 13px;

}

next{

transform: rotate(180deg); right: 13px;

}
.pic{

width: 536px; height: 356px; position: absolute; top: 170px; left: 50%; transform: translateX(-50%);

}
img{

vertical-align: top; width: 536px; height: 356px;

}

txt{

width: 536px; height: 71px; position: absolute; left: 50%; bottom: 185px; text-align: center; font: 20px/71px "微软雅黑"; color: #666; transform: translateX(-50%);

}
.circle{

text-align: center; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);

}
.circle span{

border: 1px solid #fff; width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer;

}
.circle span.active{

background-color: #fff;

}

二，javaScript的实现

1，获取元素

let pic = document.querySelector('.pic');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');
let txt = document.querySelector('#txt span');
//轮播图数组
let arr = ['img/img1.jpg','img/abc.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];
let num = 0 ;
let circle = document.querySelector('.circle');
let img = document.querySelector('#img');
let timer = null;

2，渲染并获取小圆点

//渲染轮播图上的小圆点
for(let i = 0;i

circle.innerHTML+=`<span></span>`

}
let circleAll = document.querySelectorAll('.circle span');

3，轮播时需要调用的函数

//轮播函数
let loop = (addNum,flag)=>{

num = num+addNum; if(flag){ if(num == arr.length){ num = 0; } }else{ if(num < 0){ num = arr.length-1; } } for(let i = 0;i<circleAll.length;i++){ circleAll[i].classList.remove('active'); } circleAll[num].classList.add('active'); img.src = arr[num]; txt.innerHTML= num+1;

};

4，进入页面时自动播放轮播

//定时器
let auto = ()=>{

timer = setInterval(()=>{ let addNum =1; let flag = true; loop(addNum,flag); },1000);

};
//进入页面时自动轮播
auto();

5，鼠标的移入移出

//鼠标移入清除定时器
pic.onmouseover=function () {

clearInterval(timer);

};
//鼠标移出启动定时器
pic.onmouseout =function () {

auto();

};

6，实现上一张及下一张功能

//下一张
next.onclick = function () {

let addNum = 1; let flag = true; loop(addNum,flag);

};
//上一张
prev.onclick = function () {

let addNum = -1; let flag = false; loop(addNum,flag);

};

7，实现点击小圆点切换图片的功能

//点击圆点切换图片
circleAll.forEach((item,index)=>{

item.onclick=function () { img.src = arr[index]; txt.innerHTML= index+1; for(let i = 0;i<circleAll.length;i++){ circleAll[i].classList.remove('active'); } circleAll[index].classList.add('active'); //num赋值为index,使鼠标移出后图片播放从当前的图片开始 

继续自动轮播

 num = index; } 

})

整个轮播的功能就实现，欢迎大家交流