案例描述
在瀏覽器中每相隔一秒鐘切換一張圖片，圖片相對應的圖片解釋也跟着改變。
案例圖示
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>