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