案例描述
在浏览器中每相隔一秒钟切换一张图片,图片相对应的图片解释也跟着改变。
案例图示
HTML
详解请看注释
<body>
<div id="box">
<ul class="left">
<li class="current"><a href="#">图片一</a></li>
<li><a href="#">图片二</a></li>
<li><a href="#">图片三</a></li>
<li><a href="#">图片四</a></li>
</ul>
<div class="center">
<a href="#"><img src="./program1/images/1.jpg" width="200px" height="130px"></a>
<a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
<a href="#"><img src="./program1/images/4.jpg" width="200px" height="130px"></a>
<a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
<a href="#"><img src="./program1/images/1.jpg" width="200px" height="130px"></a>
<a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
<a href="#"><img src="./program1/images/4.jpg" width="200px" height="130px"></a>
<a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
</div>
<ul class="right">
<li><a href="#">图片五</a></li>
<li><a href="#">图片六</a></li>
<li><a href="#">图片七</a></li>
<li><a href="#">图片八</a></li>
</ul>
</div>
</body>
CSS
详解请看注释
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
#box {
width: 323px;
height: 130px;
border: 1px solid #ccc;
margin: 100px auto; /*水平居中*/
}
.left, .right {
width: 60px;
height: 130px;
float: left;
}
.center {
width: 200px;
height:130px;
float: left;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
/* 隐藏 */
overflow: hidden;
}
.center img {
padding: 10px;
}
li {
line-height: 20px;
text-align: center;
border-top: 1px solid #ccc;
padding: 6px;
}
/* 去掉左右第一个孩子的上边框 */
.left li:first-child, .right li:first-child {
border-top: none;
}
/* 改变选中图片li的背景颜色 */
.current {
background-color: #ccc;
}
</style>
JS核心代码
这里需要注意:
(1)索引 index。没当轮播到最后一张图片后,又要重新轮播到第一张图片,所以在这里使用index %= 7
(2)使用排他思想,首先将所有的 li 标签className置为空, img 标签的style.display 置为 none,再处理选中事项
<script>
window.onload = function (){
//获取标签
var allLi = document.getElementsByTagName('li');
var allImg = document.getElementsByTagName('img');
var current = document.getElementsByClassName('current');
//索引
var index = 0;
//定时器
setInterval(function(){
//索引++
index++;
index %= 8; //index 0-7
//排他
for (let i = 0; i < allLi.length; i++) {
allLi[i].className = '';
allImg[i].style.display = 'none';
}
//处理选中
allLi[index].className = 'current';
allImg[index].style.display = 'block';
},1000);
};
</script>