知识点
排他思想：当前图片和标签只能有一个带有特殊属性利用索引记录当前的值一共有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>
