js原生实现图片轮播

最新推荐文章于 2024-06-17 15:29:34 发布

mwsblue

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量67

点赞数

分类专栏： js算法前端基础文章标签： HTML CSS JavaScript 轮播图前端开发

本文链接：https://blog.csdn.net/mwsblue/article/details/115647621

版权

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

16 篇文章 0 订阅

订阅专栏

js算法

8 篇文章 0 订阅

订阅专栏

<!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>