【两种方法实现 CSS/Javascript 简单的图片轮播效果】

方法①纯CSS动画实现图片轮播效果

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

				box-sizing: border-box;
			}

			.imgBox {
				margin: 0 auto;
				width: 300px;
				height: 280px;
				overflow: hidden;
				background-color: #00E649;
			}

			.showBox {
				height: 280px;
				width: 1500px;
				animation: move 16s infinite linear;
			}

			.imgBox img {
				float: left;
				width: 300px;
				height: 280px;
				border: 2px solid #FFF;
			}

			@keyframes move {
				0% {
					transform: translateX(0px);
				}

				25% {
					transform: translateX(-300px);
				}

				50% {
					transform: translateX(-600px);
				}

				75% {
					transform: translateX(-900px);
				}

				100% {
					transform: translateX(-1200px);
				}
			}
		style>
	head>
	<body>
		
		<div class="imgBox">
			<div class="showBox">
				<a href=""><img src="image/01.png" alt="">a>
				<a href=""><img src="image/02.png" alt="">a>
				<a href=""><img src="image/03.png" alt="">a>
				<a href=""><img src="image/04.png" alt="">a>
				<a href=""><img src="image/01.png" alt="">a>
			div>
		div>
	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

方法②Javascript定时器实现图片轮播效果

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

				box-sizing: border-box;
			}

			.box {
				width: 300px;
				height: 280px;
				overflow: hidden;
				background-color: #00E649;
				margin: 0 auto;
			}

			.box img {
				float: left;
				width: 300px;
				height: 280px;
				border: 2px solid #FFF;
			}
		style>
	head>
	<body>
		
		<div class="box">
			<a href=""><img src="image/01.png" alt="" id="imgSlider" />a>
		div>

		<script type="text/javascript">
			var img = document.getElementById("imgSlider");

			var imgArr = ["image/01.png", "image/02.png", "image/03.png", "image/04.png", "image/01.png"];

			var ind = 0;
			var change = function() {
				ind = (ind + 1) % imgArr.length;
				img.src = imgArr[ind];
			}
			var time = 2000;
			var timer =  setInterval(change,time);
		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

相关阅读:
MQTT物联网通讯协议入门及Demo实现
【Harmony OS】【FAQ】鸿蒙问题合集2
notion database 必知必会
题解：ABC319C - False Hope
cesium影像推送
【UiBot干货】UiBot屏幕锁屏常见的7个问题
Linux软件：Linux如何使用源码方式安装rabbitmq并设置开机自启
Tmux 简单使用
Git在实际生产中的使用
【FusionInsight 迁移】HBase从C50迁移到6.5.1（03）6.5.1上准备Loader

原文地址：https://blog.csdn.net/sakura22123/article/details/126714381