原生代码之实现轮播图（左右翻页，定时翻页，指定翻页）

本文链接：https://blog.csdn.net/weixin_43964414/article/details/104844041

本文详细介绍了一种直观的轮播图实现方法，通过HTML、CSS和JavaScript，利用图片数组和事件监听实现图片自动轮播及手动切换。文章还介绍了如何通过按钮和导航点控制图片的显示，提供了一个完整的轮播图代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在写代码之前我们需要理清如何穿插图片呢？

可以让所有图片都float：left，用一个大盒子装进所有图片，在用一个小盒子显示图片，溢出图片就hidden，之后以每张图片的宽度来scrollLeft.
可以给每张图片一个name/id，用循环遍历所有图片
可以用float:left,但是除了我要显示的图片外，其他图片都hidden，之后每当我需要某张图片时，我就把它制定到某位置
…
在这里，我将用第二种方法，因为它很直观明了，我要哪张图片我就调哪张图片。

HTML部分：在div里面我装了一张图片，name:0, 这是为了在刚打开的时候，我们的页面是有东西的而不是一片空白。其他部分都好理解，不理解的可在下方评论。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="stylesheet" href="轮播图.css" />
		<script src="轮播图.js">
		</script>
	</head>

	<body>
		<header>
			<div id="oImg">
				<!-- 轮流播放图片 -->
				<img id="insert" src="img/轮1.jpg" name="0"/>
			</div>
			<!-- 左右切换图片 -->
			<p id="left" οnclick="goBack()"></p>
			<p id="right" οnclick="goForward()"></p>

			<ul id="nav">
				<!-- 指定某张图片 -->
				<li id="1" οnclick="move(this)">1</li>
				<li id="2" οnclick="move(this)">2</li>
				<li id="3" οnclick="move(this)">3</li>
				<li id="4" οnclick="move(this)">4</li>
				<li id="5" οnclick="move(this)">5</li>
			</ul>
		</header>


	</body>

</html>

CSS：

* {
	margin: 0 auto;
	padding: 0 auto;
}

header {
	width: 100%;
	height: 680px;
	position: relative;

}

img {
	width: 100%;
	height: 680px; 
}   

#nav { 
	position: absolute;
	bottom: 5px;
	left: 30%;
}

#nav li {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #ccc;
	font-size: 24px;
	border-radius: 9px;
	color: darkslategrey;
	font-family: 'Times New Roman', Times, serif;
	margin: 0 25px;
	float: left;
	cursor: pointer;
	list-style: none;
}

#nav li:hover {
	background: peru;
}


#left {
	width: 25px;
	height: 24px;
	left: 0;
	top: 50%;
	cursor: pointer;
	position: absolute;
	background: url(img/fx1.png);
}

#right {
	width: 25px;
	height: 24px;
	right: 0;
	top: 50%;
	cursor: pointer;
	position: absolute;
	background: url(img/fx2.png);
}

之后我们来看重中之重JS部分
JavaScript:

// 五张图片的url
var oImg1 = "img/轮1.jpg";
var oImg2 = "img/轮2.jpg";
var oImg3 = "img/轮3.jpg";
var oImg4 = "img/轮4.jpg";
var oImg5 = "img/轮5.jpg";
// 把5张图片存入一个数组
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

window.onload = function() {
	//刚加载时第一张图片1号背景颜色
	document.getElementById("1").style.background = "peru";  
	run()
	

}

//轮播
function run() { 
	timer = setInterval(function() {
		//随机点数字时能接着变化 
		var pic = document.getElementById("insert").name;
		var shade = document.getElementById("insert");  
		
		//如果为最后一张图片则重新循环
		if (pic == 4) {
			pic = -1;
		}

		//点一个数字该数字背景颜色变化其余的不变
		var aLi = document.getElementsByTagName("li");
		for (var j = 0; j < aLi.length; j++) {
			aLi[j].style.backgroundColor = "#CCCCCC";
		} 

		var i = parseInt(pic);   
		
		document.getElementById("insert").src = arr[i + 1]; 
		
		document.getElementById("insert").name = i + 1; 
		 
		//数字随图片变化
		switch (i) {
			case 0:
				var temp = '2';
				break;
			case 1:
				var temp = '3';
				break;
			case 2:
				var temp = '4';
				break;
			case 3:
				var temp = '5';
				break;
			case -1:
				var temp = '1';
				break;
		}
		document.getElementById(temp).style.background = "peru"   
		
	}, 5000)
}

//右箭头 
function goForward() {
	var temp = document.getElementById("insert").name;
	var oBox = document.getElementById("insert"); 
	var aLi = document.getElementsByTagName("li");
	// 数字跟着图片一起变
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.backgroundColor = "#CCCCCC";
	}

	switch (temp) {
		case "0":
			var n = '2';
			break;
		case "1":
			var n = '3';
			break;
		case "2":
			var n = '4';
			break;
		case "3":
			var n = '5';
			break;
		case "4":
			var n = '1';
			break;
	}

	document.getElementById(n).style.background = "peru"
	// 向右移动图片
	for (var j = 0; j < arr.length; j++) {
		if (j < 4) {
			if (temp == j) {
				oBox.src = arr[j + 1]; 
			}
		} else {
			if (temp == 4) {
				oBox.src = arr[0]; 
			}
		}
	} 
	// 轮到最后一张图片时返回第一张
	if (temp < 4) {
		oBox.name = parseInt(temp) + 1;
	} else {
		oBox.name = 0;
	}
}

//左箭头
function goBack() {
	var temp = document.getElementById("insert").name;
	var oBox = document.getElementById("insert")
	var aLi = document.getElementsByTagName("li");
	// 图片移动时数字也跟着变
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.backgroundColor = "#CCCCCC";
	}

	switch (temp) {
		case "0":
			var n = '5';
			break;
		case "1":
			var n = '1';
			break;
		case "2":
			var n = '2';
			break;
		case "3":
			var n = '3';
			break;
		case "4":
			var n = '4';
			break;
	}

	document.getElementById(n).style.background = "peru"
	// 向左移动图片 

	for (var j = 0; j < arr.length; j++) {
		if (j > 0) {
			if (temp == j) {
				oBox.src = arr[j - 1];
			}
		} else {
			if (temp == 0) {
				oBox.src = arr[4];
			}
		}
	}
	// 轮到第一张图片时返回最后一张
	if (temp > 0) {
		oBox.name = parseInt(temp) - 1;
	} else {
		oBox.name = 4;
	}
}

//指定图片
function move(num) { 
	var oBox = document.getElementById("insert");
	var temp = document.getElementById("insert").name;
	var aLi = document.getElementsByTagName("li");
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.backgroundColor = "#CCCCCC";
	}

	document.getElementById(num.innerHTML).style.background = "peru"

	switch (num.innerHTML) {
		case "1":
			oBox.src = arr[0];
			oBox.name = 0;
			break;
		case "2":
			oBox.src = arr[1];
			oBox.name = 1;
			break;
		case "3":
			oBox.src = arr[2];
			oBox.name = 2;
			break;
		case "4":
			oBox.src = arr[3];
			oBox.name = 3;
			break;
		case "5":
			oBox.src = arr[4];
			oBox.name = 4;
			break;
	}
}

JavaScript部分我写的很详细，仔细看的话是可以看懂的，主要分3个重要部分：

用src来调用每张图片并给每张图片一个name，这样方便后面的重复使用
为下方的数字按钮匹配图片，点击1跳到第1张图片，点击2跳到第2张图片…因为我把所有的图片都存在了一个数组里，所以在匹配的时候要注意数组0位置才是数字1指定的图片
可以来回翻页，当到达最后一张图片时，我再点击下一张图片又能返回到第一张图片了，亦或者当我点击到第一张图片时，再上一张图片又回到第五张图片了

效果如下：
在这里插入图片描述

大家有问题可以在下方评论哦，看到了会及时回复哒！