14周轮播图

轮播图

	<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;
			width: 20px;
			text-align: center;
		}
		.red{
			background-color: red;
		}
		.trans{
			background-color: transparent;
		}
	</style>
	<body>
		<div class="content">
			<img src="img/01.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/01.jpg","img/02.jpg","img/03.jpg"]
		let img=document.querySelector('img')
		let as=document.querySelectorAll('a')

		function changeImg(){
			as[num].className='trans'
			//num从0变成1、2，然后再变回1，依次循环
			if(num<arr.length-1){
				num++
			}else{
				num=0
			}
			img.src=arr[num]
			as[num].className='red'
			
		}
		setInterval(changeImg,2000)
	</script>
posted @ 2026-06-07 22:40  feng-luo  阅读(5)  评论(0)    收藏  举报