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

一、献上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;
}

})

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