知识点
- 排他思想：当前图片和标签只能有一个带有特殊属性
- 利用索引记录当前的值
- 一共有n张图片，loop %= n
运行结果
每隔一秒不断播放
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
#box{
width: 322px;
height: 250px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.left, .right{
width: 60px;
height: 250px;
float: left;
}
.center{
width: 200px;
height: 250px;
float: left;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
overflow: hidden;
}
li{
line-height: 27px;
text-align: center;
border-bottom: 1px solid #ccc;
}
.left li:last-child, .right li:last-child{
border-bottom: none;
}
.current{
background: red;
}
</style>
</head>
<body>
<div id="box">
<ul class="left">
<li class="current"><a href="#">美食1</a></li>
<li><a href="#">美食2</a></li>
<li><a href="#">美食3</a></li>
<li><a href="#">美食4</a></li>
<li><a href="#">美食5</a></li>
<li><a href="#">美食6</a></li>
<li><a href="#">美食7</a></li>
<li><a href="#">美食8</a></li>
<li><a href="#">美食9</a></li>
</ul>
<div class="center">
<a href="#"><img src="images/img1.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img2.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img3.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img4.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img5.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img6.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img7.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img8.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img9.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img10.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img11.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img12.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img14.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img15.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img16.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img17.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img18.jpg" width="200" height="250"/></a>
<a href="#"><img src="images/img19.jpg" width="200" height="250"/></a>
</div>
<ul class="right">
<li><a href="#">美食10</a></li>
<li><a href="#">美食11</a></li>
<li><a href="#">美食12</a></li>
<li><a href="#">美食13</a></li>
<li><a href="#">美食14</a></li>
<li><a href="#">美食15</a></li>
<li><a href="#">美食16</a></li>
<li><a href="#">美食17</a></li>
<li><a href="#">美食18</a></li>
</ul>
</div>
<script src="../../MyTools/MyTools.js"></script>
<script>
window.addEventListener('load',function (ev) {
// 1. 获取需要的标签
var allLis = document.getElementsByTagName('li');
var allImg = document.getElementsByTagName('img');
// 2. 定义索引
var loop = 0;
// 3. 定时器
setInterval(function () {
// 3.1 索引++
loop += 1;
loop %= 18;
// 3.2 排他
for (var i = 0; i < allLis.length; i++) {
allLis[i].className = '';
allImg[i].style.display = 'none';
}
// 3.3 处理自己选中
allImg[loop].style.display = 'block';
allLis[loop].className = 'current';
}, 1000);
});
</script>
</body>
</html>
