轮播图的实现

轮播图的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div.content{
				width: 200px;
				height: 200px;
				margin: 0 auto;
			}
			li{
				float: left;/*横向*/
				list-style-type: none;/*去掉圆点修饰*/
			}
			a{
				color: #000;
				text-decoration: none;/*去掉下划线*/
				display: inline-block;/*更改a的显示属性*/
				width: 20px;
				text-align: center;
			}
			.red{
				background-color: red;
			}
			.trains{
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="img/photo1.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/photo1.jpg","img/photo2.jpg","img/photo3.jpg"]
		let img=document.querySelector('img')
		let as=document.querySelectorAll('a')
		function changeImg(){
			//把上一个数字的背景设置为透明
			as[num].className='trans'
			//num在0，1，2，01，2循环
			if (num<arr.length-1) {
				num++
			} else{
				num=0
			}
			//设置img的src属性
			img.src=arr[num]
			//把当前数字的背景设置为红色
			as[num].className='red'
		}
		//每隔2秒运行一次函数
		setInterval(changeImg,2000)
	</script>
</html>
posted @ 2026-07-08 17:10  碰一下猫猫头  阅读(7)  评论(0)    收藏  举报