实现轮播图效果
<!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=0let 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>