开门见山，今天要实现的轮播效果如下图所示：(轮播自动播放；点击左右按钮实现上一张和下一张的功能；鼠标移入轮播暂停；鼠标移出轮播自动播放；小圆点随着图片的变化而变化，点击哪个小圆点回到哪张图片；底部显示第几张图片)
![1565143305_1_]( "1565143305_1_")
一、献上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;
}
})
整个轮播的功能就实现，欢迎大家交流
