如何实现轮播效果图 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style type="text/css">
			div.content{
				margin: 0 auto;
				width: 200px;
			}
			li{
				float: left;/*横向*/
				list-style-type: none;/*去掉圆点修饰*/
			}
			a{
				color: #000000;
				text-decoration: none;
				display: inline-block;/*修改a的显示属性*/
				width: 20px;
				text-align: center;
			}
			.red{
				background-color: red;
			}
			.trans{
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="img/bfa07afbd4050a122d611a6097697b85.jpg"/>
			
		</div>
		<ul>
			<li><a href="#" class="red">1</a></li>
			<li><a href="#" >2</a></li>
			<li><a href="#">3</a></li>
		</ul>
	</body>
	<script type="text/javascript">
		let num=0
		let arr=["img/bfa07afbd4050a122d611a6097697b85.jpg","img/8c3de66883fad4244a9183d958a26759.jpg","img/2af2ae5c6a2b6c9239bbb0c75b2c63d5.jpg"]
		let img=document.querySelector("img")
		let as=document.querySelectorAll("a")
		function changeImg(){
			//把上一个数字的背景
			as[num].className='trans'
			if (num<arr.length-1){
				num++
			}else{
				num=0
			}
			img.src=arr[num]
			as[num].className='red'
		}
		setInterval(changeImg,2000)
	</script>
</html>
``
posted @ 2026-06-26 09:32  安徒生的熊  阅读(1)  评论(0)    收藏  举报