本文实例为大家分享了js编写无缝轮播图的具体代码，供大家参考，具体内容如下
前言
这个是一个轮播图
提示：
请让最后一个img和第一个img是一张图片相同
且 li数目为img数目-1；
一、无缝轮播图
让第一张和最后一张相同
type:第一张和最后一张相同；
在最后一张向下一张切换时，立刻跳到第一张 然后向第二张正常切换
二、使用步骤
1.html代码
代码如下（示例）：
|
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
|
<div class="banner">
<div class="qh">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="left"></div>
<div class="right"></div>
<ul class="banner_img clear">
<li>
<img src="img/1.png" alt="">
</li>
<li>
<img src="img/2.png" alt="">
</li>
<li>
<img src="img/3.png" alt="">
</li>
<li>
<img src="img/4.png" alt="">
</li>
<li>
<img src="img/5.png" alt="">
</li>
<li>
<img src="img/6.png" alt="">
</li>
<li>
<img src="img/7.png" alt="">
</li>
<li>
<img src="img/1.png" alt="">
</li>
</ul>
</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
62
63
64
65
66
67
68
69
70
71
72
73
|
*{
margin:0;
padding:0;
}
.banner {
position: relative;
margin: auto;
margin-top: 20px;
width: 1140px;
height: 600px;
border: 1px solid #000;
overflow: hidden;
}
.banner ul {
position: relative;
width: 10000px;
}
.banner ul li {
width: 1140px;
height: 100%;
float: left;
}
.banner ul img {
width: 1140px;
height: 100%;
object-fit: cover;
}
.banner>div {
position: absolute;
}
.banner .qh {
position: absolute;
bottom: 0;
right: 0;
height: 20px;
z-index: 1;
}
.banner .qh div {
margin-right: 10px;
width: 10px;
height: 10px;
background: transparent;
border: 1px solid #f0f;
border-radius: 5px;
float: left;
z-index: 1;
}
.left{
top: 0;
bottom: 0;
margin: auto;
height: 40px;
width: 20px;
background: #f0f;
left: 0;
z-index: 1;
}
.right{
top: 0;
bottom: 0;
margin: auto;
height: 40px;
background: #f0f;
width: 20px;
right: 0;
z-index: 1;
}
|
2.js代码
代码如下：
startMove是一个运动框架 缓冲运动；当然你也可以用其他的
|
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
var odiv = document.querySelector(".banner");
var oul = document.querySelector(".banner_img");
var aimg = oul.querySelectorAll("img");
var oqh = document.querySelector(".qh")
var aqh_div = oqh.querySelectorAll("div");
var alist = aimg[0].offsetWidth;
var i=0;
init();
function init(){
for (var j=0; j<aimg.length-1;j++) {
aqh_div[j].style.background="transparent";
}
if (i<aimg.length-1) {
aqh_div[i].style.background="#f0f";
}else{
aqh_div[0].style.background="#f0f";
}
}
function next() {//下一张
i++;
let left =i*(-alist);
if (left <= -alist * (aimg.length)) {
oul.style.left = "0px";
i=1;
left =-alist*i;
}
startMove(oul, { left: left });
init();
}
function back() {//上一张
i--;
let left = i*(-alist);
if(i<0) {
oul.style.left = (aimg.length-1)* (-alist)+"px";
i=aimg.length-2;
left= i*(-alist);
}
startMove(oul, { left: left });
init();
}
function move(i) {//跳到第i张 i从0开始
window.i=i;
left = i* (-alist);
startMove(oul, { left: left });
init();
}
for (let i in aqh_div) {
aqh_div[i].onclick = function () {
move(i);
console.log(i);
}
}
//下面是一个移入div暂停计时器 移出打开计时器
odiv.Interval = setInterval(next, 2000);
odiv.onmouseenter = function () {
clearInterval(odiv.Interval);
};
odiv.onmouseleave = function () {
clearInterval(odiv.Interval);
odiv.Interval = setInterval(next, 2000);
};
//下面是两个左右切换的按钮
var left_btn=document.querySelector(".left");
var right_btn=document.querySelector(".right");
left_btn.onclick=function(){
back();
}
right_btn.onclick=function(){
next();
}
//下面是一个运动框架 第一个参数是运动的对象 第二个为json对象{要改变的属性：值}
// 第三个为运动结束后要做到事情 参数是一个函数
/**
*
* @param obj 运动的对象
* @param json {width:400, height:400}
* @param fnEnd回调
*/
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bStop = true;
for (attr in json) {
// 1. 取得当前的值（可以是widht，height，opacity等的值）
var objAttr = 0;
if (attr == "opacity") {
objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
objAttr = parseInt(getStyle(obj, attr));
}
// 2.计算运动速度
var iSpeed = (json[attr] - objAttr) / 50;//缓冲运动
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 3. 检测所有运动是否到达目标
if (objAttr != json[attr]) {
bStop = false;
}
if (attr == "opacity") {
obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')';
obj.style.opacity = (objAttr + iSpeed) / 100;
} else {
obj.style[attr] = objAttr + iSpeed + 'px';// 需要又.属性名的形式改成[]
}
}
if (bStop) { // 表示所有运动都到达目标值
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 10);
}
/**
* 获取行间/内联/外部样式，无法设置
* @param obj
* @param attr
*/
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_34996079/article/details/108520984