精简知识点总结
CSS 部分
margin:0 auto：固定宽块级元素水平居中
float:left：li 横向浮动并排
list-style-type:none：清除列表默认小圆点
text-decoration:none：去掉 a 标签下划线
display:inline-block：a 标签可设置宽高、居中文字
text-align:center：文字水平居中
transparent：透明背景色
JS 部分
document.querySelector 获取单个元素；querySelectorAll 获取一组元素（伪数组）
数组存储图片路径，通过下标切换图片
元素.src 修改图片地址实现轮播切换
元素.className 修改类名，切换按钮背景色
setInterval(函数,毫秒)：定时循环执行，自动轮播
判断实现下标循环：到最后一张重置为 0
示例
.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>
</head>
<body>
<div class="content">
<img src='img/1.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/1.jpg','img/2.jpg','img/3.jpg']
let img=document.querySelector("img")
let as=document.querySelectorAll('a')
function changeImg(){
//num在012012循环
as[num].className='trans'
if (num<arr.length-1) {
num++
} else{
num=0
//设置img的src属性
}
img.src=arr[num]
as[num].className='red'
}
setInterval(changeImg,2000)
</script>
</html>
浙公网安备 33010602011771号