图片自动播放的案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 13 a{ 14 text-decoration: none; 15 color: #000; 16 } 17 18 #box{ 19 width: 322px; 20 height: 250px; 21 border: 1px solid #ccc; 22 margin: 100px auto; 23 24 position: relative; 25 } 26 27 .left, .right{ 28 width: 60px; 29 height: 250px; 30 /*background-color:red;*/ 31 float: left; 32 } 33 34 .center{ 35 width: 200px; 36 height: 250px; 37 float: left; 38 border-left:1px solid #ccc; 39 border-right:1px solid #ccc; 40 overflow: hidden; 41 } 42 43 li{ 44 line-height: 27px; 45 text-align: center; 46 border-bottom: 1px solid #ccc; 47 } 48 49 .left li:last-child, .right li:last-child{ 50 border-bottom: none; 51 } 52 53 .current{ 54 background: red; 55 } 56 </style> 57 </head> 58 <body> 59 <div id="box"> 60 <ul class="left"> 61 <li class="current"><a href="#">美食1</a></li> 62 <li><a href="#">美食2</a></li> 63 <li><a href="#">美食3</a></li> 64 <li><a href="#">美食4</a></li> 65 <li><a href="#">美食5</a></li> 66 <li><a href="#">美食6</a></li> 67 <li><a href="#">美食7</a></li> 68 <li><a href="#">美食8</a></li> 69 <li><a href="#">美食9</a></li> 70 </ul> 71 <div class="center"> 72 <a href="#"><img src="images/img1.jpg" width="200" height="250"/></a> 73 <a href="#"><img src="images/img2.jpg" width="200" height="250"/></a> 74 <a href="#"><img src="images/img3.jpg" width="200" height="250"/></a> 75 <a href="#"><img src="images/img4.jpg" width="200" height="250"/></a> 76 <a href="#"><img src="images/img5.jpg" width="200" height="250"/></a> 77 <a href="#"><img src="images/img6.jpg" width="200" height="250"/></a> 78 <a href="#"><img src="images/img7.jpg" width="200" height="250"/></a> 79 <a href="#"><img src="images/img8.jpg" width="200" height="250"/></a> 80 <a href="#"><img src="images/img9.jpg" width="200" height="250"/></a> 81 <a href="#"><img src="images/img10.jpg" width="200" height="250"/></a> 82 <a href="#"><img src="images/img11.jpg" width="200" height="250"/></a> 83 <a href="#"><img src="images/img12.jpg" width="200" height="250"/></a> 84 <a href="#"><img src="images/img14.jpg" width="200" height="250"/></a> 85 <a href="#"><img src="images/img15.jpg" width="200" height="250"/></a> 86 <a href="#"><img src="images/img16.jpg" width="200" height="250"/></a> 87 <a href="#"><img src="images/img17.jpg" width="200" height="250"/></a> 88 <a href="#"><img src="images/img18.jpg" width="200" height="250"/></a> 89 <a href="#"><img src="images/img19.jpg" width="200" height="250"/></a> 90 </div> 91 <ul class="right"> 92 <li><a href="#">美食10</a></li> 93 <li><a href="#">美食11</a></li> 94 <li><a href="#">美食12</a></li> 95 <li><a href="#">美食13</a></li> 96 <li><a href="#">美食14</a></li> 97 <li><a href="#">美食15</a></li> 98 <li><a href="#">美食16</a></li> 99 <li><a href="#">美食17</a></li> 100 <li><a href="#">美食18</a></li> 101 </ul> 102 103 <script> 104 window.addEventListener('load', function (ev) { 105 // 1. 获取需要的标签 106 var allLis = document.getElementsByTagName('li'); 107 var allImages = document.getElementsByTagName('img'); 108 109 // 2. 索引 110 var loop = 0; 111 112 // 3. 定时器 113 setInterval(function () { 114 // 3.1 索引++ 115 loop += 1; 116 loop %= 18; 117 // console.log(loop); 118 119 // 3.2 排他 120 for (var i = 0; i < allLis.length; i++) { 121 allLis[i].className = ''; 122 allImages[i].style.display = 'none'; 123 } 124 125 // 3.3 处理自己选中 126 allLis[loop].className = 'current'; 127 allImages[loop].style.display = 'block'; 128 }, 1000); 129 }); 130 </script> 131 </div> 132 </body> 133 </html>
定时器、排他思想
