js原生实现图片轮播

最新推荐文章于 2025-05-13 09:36:12 发布

原创最新推荐文章于 2025-05-13 09:36:12 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

前端基础同时被 2 个专栏收录

16 篇文章

订阅专栏

js算法

8 篇文章

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的简单轮播图示例。通过设置定时器，每隔2秒自动切换图片，并通过底部小圆点显示当前选中图片的状态。此代码片段展示了前端开发中的动态图像展示技术。

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="01-js-轮播图.css" />
</head>

<body>
	<div class="lunbo">
		<ul class="imgBox">
			<li><img src="https://img.alicdn.com/tfs/TB115Vkevb2gK0jSZK9XXaEgFXa-520-280.png_q90_.webp"></li>
			<li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"></li>
			<li><img src="https://img.alicdn.com/tfs/TB1gQY9dkH0gK0jSZPiXXavapXa-520-280.jpg_q90_.webp"></li>
			<li><img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"></li>
		</ul>
		<ul class="circle">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>


	<script type="text/javascript">
		var imgList = document.querySelectorAll(".imgBox>li");
		var circleList = document.querySelectorAll(".circle>li");
        
		var index = 0;
		var lunbo = function () {
			index++;
			if(index>=4){
				index = 0;
			}
			for (var i = 0; i < imgList.length; i++) {
                 imgList[i].style.display = "none";
				 circleList[i].style.backgroundColor = "white"

			}
			imgList[index].style.display = "block";
			circleList[index].style.backgroundColor = "red"
		}

		setInterval(lunbo,2000)
	</script>
</body>

</html>