|
JS实现轮播图点击切换、按钮切换功能
前言轮播图案例总结
前言
轮播图的案例非常经典，写法也非常多，我在写一个自己用的比较多的写法，帮助大家理解，在网页的设计中，可以直接拿去用（记得换图片路径哦！），仅供参考学习。
轮播图案例
代码如下（示例）：
DOCTYPE html>
Document
* {
margin: 0;
padding: 0;
list-style: none;
}
#slideshow {
width: 800px;
height: 600px;
overflow: hidden;
position: relative;
margin: 50px auto;
}
#pre {
position: absolute;
top: 250px;
left: 368px;
width: 50px;
height: 100px;
font-size: 40px;
opacity: 0.5;
cursor: pointer;
}
#next {
position: absolute;
top: 250px;
left: 1118px;
width: 50px;
height: 100px;
font-size: 40px;
opacity: 0.5;
cursor: pointer;
}
#imglist li {
position: absolute;
opacity: 0;
}
#dotlist {
position: absolute;
bottom: 30px;
width: 100px;
display: flex;
justify-content: space-between;
left: 50%;
transform: translate(-50%);
}
#dotlist > li {
width: 20px;
height: 20px;
text-align: center;
border-radius: 50%;
background-color: rgb(206, 16, 16);
opacity: 0.3;
cursor: pointer;
user-select: none;
}
#imglist > li.appear,
#dotlist > li.appear {
opacity: 1;
}
1
2
3
4
5
>
//获取元素
var slideShow = document.getElementById("slideshow");
var imgList = document.getElementById("imglist");
var imgs = imgList.children;
var dotList = document.getElementById("dotlist");
var dots = dotList.children;
var pre = document.getElementById("pre");
var next = document.getElementById("next");
var duration = 2000;
var Index = 0;
var count = imgList.children.length;
var timer;
window.onload = function () {
imgList.children[0].classList.add("appear");
dotList.children[0].classList.add("appear");
for (var i = 0; i |