本文实例为大家分享了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
