本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下
需求：
自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图
效果图：
![轮播图]
思路：
将所有需要轮播的图片横向排列，可视区大小设置为只能显示一张图片，给容器设置移出隐藏后，可视区之外的部分被隐藏，这样我们就只能看见一张图片。
轮播实现是改变整个图片画幅的left值或者margin-left 值，当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。
后面功能实现顺序依旧是写法一里的思路。
HTML部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div id="banner">
<div class="w">
<!-- 左右箭头-->
<span class="iconfont icon-zuojiantou"></span>
<span class="iconfont icon-youjiantou"></span>
<!-- 轮播图-->
<ul >
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
</ul>
<!-- /小圆点-->
<ol id="circleContainer">
</ol>
</div>
</div>
|
CSS部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.w {
width: 1000px;
height: 600px;
margin: 100px auto 0;
position: relative;
overflow: hidden;
}
ul {
width: 1000%;
transition: all .5s ease-in-out;
}
ul li {
float: left;
width: 1000px;
}
ul li img {
width: 100%;
height: 600px;
}
.iconfont {
color: white;
position: absolute;
font-size: 30px;
top: calc(50% - 15px);
background-color: rgba(216, 216, 216, 0.23);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
cursor: pointer;
}
.iconfont:hover {
color: palegreen;
}
.icon-zuojiantou {
left: 0;
}
.icon-youjiantou {
right: 0;
}
#circleContainer {
position: absolute;
bottom: 10px;
left: calc(50% - 30px);
}
#circleContainer li {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
margin-right: 5px;
}
#circleContainer .change {
background-color: palegreen;
}
</style>
|
JS部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<script>
let timer = setInterval(function () {
arrow_r.onclick();
},2000);
let w = document.querySelector(".w");
w.addEventListener("mouseenter",function () {
clearInterval(timer);
});
w.addEventListener("mouseleave",function () {
clearInterval(timer);
timer = setInterval(function () {
arrow_r.onclick();
},2000);
});
//获取元素
let ul = document.querySelector("ul");
let ol = document.querySelector("#circleContainer");
let arrow_r = document.querySelector(".icon-youjiantou");
let arrow_l = document.querySelector(".icon-zuojiantou");
let ImgWidth = ul.children[0].offsetWidth;
let location_i = 0 ;
// 创建小圆点 动态生成小圆点，图片增加时小圆点也随之增加
for (let i = 0; i<ul.children.length;i++){
let li = document.createElement("li");
li.setAttribute("index",i);
li.addEventListener("click",function () {
let index = this.getAttribute("index");
move(ul,index);
location_i = index ;
});
ol.appendChild(li);
}
let liclone = ul.children[0].cloneNode(true);
ul.appendChild(liclone);
// 轮播函数
function move(targetObj,n) {
if (n === targetObj.children.length ) {
targetObj.style.marginLeft = "0px";
n = 0;
}
targetObj.style.marginLeft = -n * ImgWidth +"px";
for (let i =0 ;i<ol.children.length;i++){
ol.children[i].className = "";
}
n === 3 ? ol.children[0].className = "change": ol.children[n].className = "change";
}
ol.children[0].className = "change";
// 右箭头点击
arrow_r.onclick = function () {
if (location_i === 3) {
location_i = 0 ;
ul.style.marginLeft = "0px" ;
}
location_i++;
move(ul,location_i);
};
// 左箭头点击
arrow_l.addEventListener("click",function () {
if (location_i == 0) {
location_i = ul.children.length -1 ;
}
location_i--;
move(ul,location_i);
})
</script>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/hthththtt/article/details/108181977