本文实例为大家分享了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
|
*{ margin: 0; padding: 0;}#box{ width: 500px; height: 200px; padding: 5px; margin: 50px auto; border: 1px solid #999999;}.inner{ width: 500px; height: 200px; overflow: hidden; position: relative;}ul,ol{ list-style: none; position: absolute;}ul{ width: 3000px; height: 200px;}li{ float: left;}ol{ right: 20px; bottom: 20px;}ol>li{ width: 25px; height: 25px; line-height: 25px; text-align: center; background-color: #fff; border-radius: 50%; margin-right: 10px; cursor: pointer;}ol>li.current{ background-color: orange; color: white;}.control{ display: none;}.control>span{ position: absolute; top: 50%; margin-top: -20px; display: inline-block; width: 25px; height: 40px; line-height: 40px; background-color: rgba(0,0,0,0.3); color: white; font-size: 20px; cursor: pointer; text-align: center;}.right{ right: 0;} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<div id="box"> <div class="inner"> <ul> <li><img src="image/1.jpg" alt=""></li> <li><img src="image/2.jpg" alt=""></li> <li><img src="image/3.jpg" alt=""></li> <li><img src="image/4.jpg" alt=""></li> <li><img src="image/5.jpg" alt=""></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class="control"> <span class="left"><</span> <span class="right">></span> </div> </div></div> |
|
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
|
var box=document.getElementById("box");var ul=box.getElementsByTagName("ul")[0];var ol=box.getElementsByTagName("ol")[0];var olLiArr=ol.children;var control=box.getElementsByClassName("control")[0];ul.appendChild(ul.children[0].cloneNode(true));var index=0;var circleIndex=0;var timer=setInterval(autoPlay,2000);//鼠标移入移出box.onmouseover=function () { clearInterval(timer); control.style.display="block";};box.onmouseout=function () { timer=setInterval(autoPlay,2000); control.style.display="none";};//小圆点for (var i=0;i<olLiArr.length;i++) { olLiArr[i].index=i; olLiArr[i].onclick=function () { if(index===5){ ul.style.left=0; index=0; } for (var i=0;i<olLiArr.length;i++){ olLiArr[i].removeAttribute("class"); } this.setAttribute("class","current"); animate_constSpeed_x(ul,-this.index*500); index=this.index; circleIndex=this.index; }}//左右点击control.children[1].onclick=function () { autoPlay();};control.children[0].onclick=function () { index--; if (index<0){ ul.style.left=-2500+"px"; index=4; } animate_constSpeed_x(ul,-index*500); circleIndex--; if (circleIndex<0){ circleIndex=4; } for (var i=0;i<olLiArr.length;i++) { olLiArr[i].removeAttribute("class"); } olLiArr[circleIndex].setAttribute("class","current");}; |
|
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
|
//自动轮播封装function autoPlay() { index++; if (index>5){ ul.style.left=0; index=1; } animate_constSpeed_x(ul,-index*500); circleIndex++; if (circleIndex>4){ circleIndex=0; } for (var i=0;i<olLiArr.length;i++) { olLiArr[i].removeAttribute("class"); } olLiArr[circleIndex].setAttribute("class","current");}//匀速封装function animate_constSpeed_x(ele,endX) { clearInterval(ele.timer); var step=(endX-ele.offsetLeft)>0?10:-10; ele.timer=setInterval(function () { ele.style.left=ele.offsetLeft+step+"px"; console.log(1); if(Math.abs(endX-ele.offsetLeft)<=Math.abs(step)){ clearInterval(ele.timer); ele.style.left=endX+"px"; } },10)} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_40041509/article/details/108410965
