图片自动播放的案例

  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>

定时器、排他思想

posted @ 2019-07-16 22:48  疏影横斜水清浅  阅读(131)  评论(0编辑  收藏  举报