JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图
轮播图可以说是网页上十分常见的效果，很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来，那么轮播图就是一个很不错的练手实例。下面就是通过JS写的轮播图效果：
功能介绍
1.上/下按钮切换图片
2.点击圆点按钮切换到相应的图片
3.自动播放效果 (4秒间隔)
4.当鼠标放在图片上时，停止轮播效果；鼠标移开图片时，又出现轮播效果
实现方法如下：
html代码
<div id="Box">
<div class="img show">Onediv>
<div class="img">Twodiv>
<div class="img">Threediv>
<div class="img">Fourdiv>
<div class="img">Fivediv>
<span class="prev"><span>
<span class="next">>span>
<div class="div1">
<span class="little little_show" data-index="0">span>
<span class="little" data-index="1">span>
<span class="little" data-index="2">span>
<span class="little" data-index="3">span>
<span class="little" data-index="4">span>
div>
div>
CSS代码如下：
本文写的轮播图，主要依靠opacity属性的值来控制
.img {
position: absolute;
top: 100px;
left: 50%;
width: 480px;
height: 270px;
margin-left: -240px;
color: #FFFFFF;
/*设置图片默认透明度为0 */
opacity: 0;
/*设置图片过度效果， 会出现淡入淡出效果 */
transition: all .8s;
}
.img:nth-child(1){
background: url("background/text1.jpg");
background-size: 100%;
}
.img:nth-child(2){
background: url("background/text2.jpg");
background-size: 100%;
}
.img:nth-child(3){
background: url("background/text3.jpg");
background-size: 100%;
}
.img:nth-child(4){
background: url("background/text4.jpg");
background-size: 100%;
}
.img:nth-child(5){
background: url("background/text5.jpg");
background-size: 100%;
}
.prev {
position: absolute;
top: 185px;
left: 50%;
width: 20px;
height: 30px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 0 5px 5px 0;
margin-top: 30px;
margin-left: -240px;
color: #c2c1cb;
text-align: center;
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
}
.next {
position: absolute;
top: 185px;
left: 50%;
width: 20px;
height: 30px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 5px 0 0 5px;
margin-top: 30px;
margin-left: 218px;
color: #c2c1cb;
text-align: center;
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
}
.next:hover,
.prev:hover {
background-color: rgba(1, 1, 1, 0.73);
color: #FFFFFF;
}
.div1 {
position: absolute;
top: 350px;
left: 50%;
margin-left: -40px;
}
.little {
float: left;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: rgba(255, 245, 244, .3);
margin-left: 4px;
cursor: pointer;
border: 1px solid #464646;
}
.show{
/*通过添加show，改变图片透明度，从而实现切换效果*/
opacity: 1;
}
.little_show {
background-color: #FFFFFF;
}
JS代码如下：
let img = document.getElementsByClassName("img"); //获取所有轮播图片 集合
let next = document.querySelector(".next"); //获取下一张 按钮
let prev = document.querySelector(".prev");//获取上一张 按钮
let box = document.getElementById("Box");//获取整个盒子
let little = document.getElementsByClassName("little"); //获取所有轮播圆点按钮 集合
let index = 0;
let time = 0;
// 重置所有class
let clear = function () {
for (let i = 0;i < img.length; i++){
img[i].className = "img";
}
for (let i = 0;i < little.length;i++){
little[i].className = "little";
}
};
let show = function () {
img[index].className = "img show";
little[index].className = "little little_show";
time = 0;
};
// 下一张
let nextBtn = function () {
clear();
index++;
if(index >img.length-1){
index = 0;
}
show();
};
next.addEventListener("click",function () {
nextBtn();
});
// 上一张
let prevBtn = function () {
clear();
index--;
if(index < 0){
index = img.length-1;
}
show();
};
prev.addEventListener("click",function () {
prevBtn();
});
// 按钮
for (let i = 0; i < little.length;i++){
little[i].addEventListener("click",function () {
clear();
index = this.getAttribute("data-index");
show();
})
}
let timer;//全局变量，接收定时器
function autoTime(){
//timer接收定时器
timer = setInterval(function () {
time++;
if(time === 4){
nextBtn();
}
else if(time > 4){
time = 0;
}
console.log("time = "+time);
},1000);
}
// 调用轮播图自动播放方法
autoTime();
// 当鼠标移入imgBox时，停止轮播，清除定时器
box.onmouseover = function () {
clearInterval(timer);
};
// 当鼠标移出imgBox时，重新调用定时器并重置time
box.onmouseout = function () {
time = 0;
autoTime();
};
以上就是JS轮播图的代码，小伙伴们可以参考代码手动敲一敲；
这几天写页面的时候，发现写轮播图的时候自己脑子有点转不过来了…
所以写这篇文章记录一下，方便自己后续查看，也给更多想写JS轮播图的朋友提供一个参考…
前端小白一枚，路过的还请大佬勿喷…
有什么不对的地方也请各位大佬指点…