纯js 轮播图优化写法_js 轮播优化速度加载第一张

作者：Gausst松鼠会 | 2024-02-20 20:55:43

踩

js 轮播优化速度加载第一张

轮播图优化

制作思路:

一共两张图片循环使用

一样排成一排, 一开始第一幅就在窗口中, 然后移动将第二幅移入可是窗口, 将第一幅图片挤出. 移出的图片迅速切换到第二幅之前变成’第三幅’并且切换图像资源, 这样始终就只有两个img标签节省了资源

在这里插入图片描述

技术点:

循环是由计数器setInterval实现的, 但是开始的时候他是不会进行第一次的, 所以要去给他添加这个过程

但是添加又有个问题, 时间可能对不上, 这个时候就可以再给他加一个setTimeout来补上时间

同时可以使用数组将这个图片的地址装在数组中循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			.father {
				width: 200px;
				height: 300px;
				background-color: aliceblue;
				position: absolute;
				overflow: hidden;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.son {
				position: absolute;
				width: 200px;
				background-color: red;
				top: 0px;
				left: 0px;
			}
			
			.son>img {
				width: 200px;
			}
		</style>
		<div class="father">
			<div class="son">
				<img src="https://www.lianaiyx.com/d/file/GalGame/2019-08-02/6b499f0a08c960c2883f8b05941d655a.jpg">
			</div>
			<div class="son">
				<img src="https://www.lianaiyx.com/d/file/GalGame/2019-08-01/a4fe1aafc1027cf59766b4e1e6c52660.jpg">
			</div>
		</div>
		<script type="text/javascript">
			var arr = ['https://www.lianaiyx.com/d/file/GalGame/2019-08-02/6b499f0a08c960c2883f8b05941d655a.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-01/a4fe1aafc1027cf59766b4e1e6c52660.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-01/0e7846d36747eb0b9e81f0a69e8c67c9.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-07-30/06c06f12b648c0eb599834c72e1fab67.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-11/45d8550748d53bd0ae4a7aac5b610bee.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-16/a90a864a0aa33c58eb096f5e97d1f791.jpg'
			];
		</script>
		<script type="text/javascript">
			(function() {
				var imgbox1 = document.querySelector(".father>.son:nth-child(1)");// 第二幅
				var imgbox2 = document.querySelector(".father>.son:nth-child(2)");// 第一个
				
				// console.log(imgbox1.children[0].clientWidth)
				
				imgbox1.style.left = -200 + 'px';// 初始化对象
				setTimeout(function() {
					move(imgbox1);
					setTimeout(function() {
						move(imgbox1)
					}, 2000)
					// 
					setInterval(function() {
						init(imgbox1);
						move(imgbox1);
						setTimeout(function() {
							move(imgbox1)
						}, 2000)
					}, 4000)
						
					move(imgbox2);
					setTimeout(function() {
						init(imgbox2);
					}, 2000)
					setTimeout(function() {
						move(imgbox2);
					}, 2000);
					setTimeout(function() {
						move(imgbox2);
					}, 4000);
					
					setTimeout(function() {
						setInterval(function() {
							init(imgbox2);
							move(imgbox2);
							setTimeout(function() {
								move(imgbox2)
							}, 2000)
						}, 4000)
					}, 2000)
				}, 1000)
				
				function move(imgbox) {
					var count = 0;
					var time1 = setInterval(function() {
						count++;
						imgbox.style.left = imgbox.offsetLeft + 2 + 'px';
						if (count == 100) {
							console.log(count)
							clearInterval(time1);
						}
					}, 10);
				}

				var countImg = 1;
				function init(imgbox) {
					imgbox.style.left = -200 + 'px';
					countImg++;
					countImg = countImg%(arr.length)
					imgbox.children[0].src = arr[countImg];
				}
			})()
			
		</script>
	</body>
</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
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

在这里插入图片描述

第二种轮播图优化的包装类

制作思路: 将以上类包装起来

技术点: 需要注意凡是函数和对象中保存的变量都要加this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
		</style>
		<script type="text/javascript">
			class Lunbo {
				// 可以设置父盒子的宽度 高度(也可以使用图片的宽度和高度 图片数组 和步长 单次移动时间 位置滞留时间)
				constructor(widthFather, heightFather, imgArr, stepSize, onceTime, stayTime) {
					this.widthFather = widthFather;
					this.heightFather = heightFather;
					// this.bgcolor = bgcolor;
					this.imgArr = imgArr;
					this.countImg = 1;
					// 选取图片下标
					this.stepSize = stepSize;
					// 移动单位系数 
					this.onceTime = onceTime;
					// 移动速度系数 多少毫秒移动一次
					this.stayTime = stayTime;
					// 位置滞留时间

					this.father = document.createElement("div");
					this.imgbox1 = document.createElement("div");
					this.imgbox2 = document.createElement("div");
					this.img1 = document.createElement("img");
					this.img2 = document.createElement("img");
				}

				initLunbo() {
					// 图片预加载
					if(this.imgArr.length > 1) {
						var imgload1 = new Image();
						var imgload2 = new Image();
						imgload1.src = arr[0];
						// 第一张图片的预加载
						imgload1.onload = function() {
							imgload2.src = arr[1];
							// 第二张图片的预加载
							imgload2.onload = function() {
								// 调用初始化盒子方法
								// 添加盒子以及各种样式
								this.initAppend();
								// 开始轮播
								this.lunbo();
							}.bind(this)
						}.bind(this)
					}
					
				}
				
				lunbo() {
					//  计算单次移动间隔时间
					var IntervalTime = this.img1.clientWidth / (this.stepSize) * this.onceTime;
					// 计算总间隔时间
					var InterTime = IntervalTime + this.stayTime;

					// 先将一个盒子移动到左边
					this.imgbox1.style.left = -this.img1.clientWidth + 'px';
					// 最开始不是以来就动 等了一个时间间隔才动
					setTimeout(function() {
						// 第二张呈现的图片盒子移动预定设置
						
						// 先预先移动因为定时器第一次是不会动的
						// 所以要让他动第一次 不然等待时间太长
						this.move(this.imgbox1)
						setTimeout(function() {
							this.move(this.imgbox1)
						}.bind(this), InterTime)
						// 刚好不用设置等待时间
						// 反复以下操作
						setInterval(function() {
							this.initLocal(this.imgbox1);
							this.move(this.imgbox1);
							setTimeout(function() {
								this.move(this.imgbox1);
							}.bind(this), InterTime)
						}.bind(this), InterTime * 2)
						// 第一张呈现的图片的盒子预定设置
						
						// 需要多次移动达到第二张图相同的移动方式
						// 因为位置不同所以需要多次移动
						this.move(this.imgbox2)
						setTimeout(function() {
							this.initLocal(this.imgbox2);
						}.bind(this), InterTime)
						setTimeout(function() {
							this.move(this.imgbox2);
						}.bind(this), InterTime)
						setTimeout(function() {
							this.move(this.imgbox2);
						}.bind(this), InterTime * 2)
						console.log(InterTime * 3)
						
						// 同样需要反复, 但是这次是有延迟的所以
						// 需要一个单次定时器来完成对它的延迟
						setTimeout(function() {
							setInterval(function() {
								this.initLocal(this.imgbox2);
								this.move(this.imgbox2);
								setTimeout(function() {
									this.move(this.imgbox2);
								}.bind(this), InterTime)
							}.bind(this), InterTime * 2)
						}.bind(this) , IntervalTime + this.stayTime)
						
					}.bind(this), this.stayTime)
				}

				// 建立盒子和设置它们的样式
				initAppend() {
					this.father.appendChild(this.imgbox1);
					this.father.appendChild(this.imgbox2);

					// this.father.style.left = "50%";

					this.imgbox1.appendChild(this.img1);
					this.imgbox2.appendChild(this.img2);

					this.img1.src = this.imgArr[0];
					this.img2.src = this.imgArr[1];

					document.body.appendChild(this.father);
					this.setDivinit(this.imgbox1, 'red', undefined, true);
					this.setDivinit(this.imgbox2, 'blue', undefined, true);
					this.setDivinit(this.father, 'aliceblue', true, true, true);
				}

				// 设置盒子的样式
				setDivinit(setBox, bgcolor, fatherBoolean, autoWidth, autoHeight) {
					setBox.style.position = "absolute";

					if (autoWidth) {
						setBox.style.width = this.img1.clientWidth + 'px';
					} else {
						setBox.style.width = this.widthFather;
					}

					if (fatherBoolean) {
						setBox.style.height = this.heightFather;
						setBox.style.overflow = "hidden";
					}

					if (autoHeight) {
						setBox.style.height = this.img1.clientHeight + 'px';
					}

					if (bgcolor) {
						setBox.style.backgroundColor = bgcolor;
					}
				}

				// 移动盒子
				move(imgbox) {
					var count = 0;
					var time1 = setInterval(function() {
						count++;
						imgbox.style.left = imgbox.offsetLeft + this.stepSize + 'px';
						if (count == this.img1.clientWidth / (this.stepSize)) {
							clearInterval(time1);
						}
					}.bind(this), this.onceTime)
					
					// setInterval(()=>{
					// 	imgbox.style.left = imgbox.offsetLeft + (this.img1.clientWidth - imgbox.offsetLeft) * 0.3 + 'px';
					// }, this.onceTime)
				}
				
				// 初始化位置 同时更新图片
				initLocal(imgbox) {
					imgbox.style.left = -this.img1.clientWidth + 'px';
					this.countImg++;
					this.countImg = this.countImg % (this.imgArr.length);
					imgbox.children[0].src = this.imgArr[this.countImg];
				}
			}

			var arr = ['https://www.lianaiyx.com/d/file/GalGame/2019-08-02/6b499f0a08c960c2883f8b05941d655a.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-01/a4fe1aafc1027cf59766b4e1e6c52660.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-01/0e7846d36747eb0b9e81f0a69e8c67c9.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-07-30/06c06f12b648c0eb599834c72e1fab67.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-11/45d8550748d53bd0ae4a7aac5b610bee.jpg',
				'https://www.lianaiyx.com/d/file/GalGame/2019-08-16/a90a864a0aa33c58eb096f5e97d1f791.jpg'];
			
			new Lunbo('200px', '300px', arr, 2, 10, 2000).initLunbo()
			
			// var imgload = new Image();
			// imgload.src = arr[0];
			// imgload.onload = function() {
			// 	var imgload2 = new Image();
			// 	imgload2.src = arr[1];
			// 	imgload2.onload = function() {
			// 		new Lunbo('200px', '300px', arr, 2, 10, 2000).initLunbo()
			// 	}
			// }
			
		</script>
	</body>
</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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/120868

纯js 轮播图 优化写法_js 轮播 优化速度加载第一张

纯js 轮播图优化写法_js 轮播优化速度加载第一张