js之轮播图-优快云博客

本文介绍了一种使用HTML、CSS和JavaScript实现的简易轮播图效果。通过设置div元素的定位和过渡效果，实现了图片的自动轮播切换，适合初学者学习和应用。

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

本文仅供学习使用，来自大佬的作品，简单快捷，希望能够给你带来帮助！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slideshow</title>
	<style type="text/css">
		.wrapper{
			width: 300px;
			height: 200px;
			border: 1px solid grey;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
		}
		.div1{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			transition:left 1s;
		}
		#div1{
			background-color: red;
			left: 0;
		}
		#div2{
			background-color: blue;
			left: 100%;			
		}
		#div3{
			background-color: green;
			left: 200%;	
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="div1" id="div1">轮播图1</div>
		<div class="div1" id="div2">轮播图2</div>
		<div class="div1" id="div3">轮播图3</div>
	</div>
	<script type="text/javascript">
		//获取div集合
		var boxList = document.getElementsByClassName('div1');
		// console.log('boxList');//测试是否成功获取到div
		boxList = Array.from(boxList);//将获取的集合存入数组中
		var timer = setInterval(timeUp, 1000);
		function timeUp(){
			for(let i = 0; i < boxList.length; i++){
				boxList[i].style.zIndex = 100 - i;
				boxList[i].style.left = (i - 1) * 100 + '%';
			}
			//把数组中的第0个元素移出，放到最后面
			let box = boxList.shift();//把数组的第一个元素移出
			boxList.push(box);//在数组的后面插入新元素
		}
	</script>
</body>
</html>