轮播图轻量级写法

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8 </head>
  9 <style>
 10 .box{
 11     900px;
 12     height: 500px;
 13     border:1px solid #000;
 14     position:relative;
 15     margin:auto;
 16     overflow:hidden;
 17     
 18 }
 19 .box ul,.box ol{
 20     list-style:none;
 21     padding: 0;
 22     margin: 0;
 23 }
 24 .box ul li{
 25     900px;
 26     height: 500px;
 27     display:none;
 28 }
 29 .box ul li img{
 30      900px;
 31     height: 500px;
 32 }
 33 .box ol{
 34     120px;
 35     position:absolute;
 36     left:50%;
 37     margin-left:-50px;
 38     bottom:20px;
 39     height:20px;
 40     background:black;
 41     opacity:0.5;
 42     display:flex;
 43     justify-content: space-evenly;
 44     padding:10px 0;
 45     border-radius:20px;
 46 }
 47 .box ol li{
 48     20px;
 49     height: 20px;
 50     border-radius:50%;
 51     background:black;
 52     border:1px solid #999;
 53     cursor: pointer;
 54 }
 55 .box ol li.current{
 56     background:white;
 57     transition: 0.5s;
 58 }
 59 .box ul li.current{
 60     display:block;
 61     transition: 1s;
 62 }
 63 .box .left,.box .right{
 64     position:absolute;
 65     top:50%;
 66     30px;
 67     height:30px;
 68     margin-top:-15px;
 69     background:black;
 70     opacity: 0.5;
 71     text-align:center;
 72     line-height: 30px;
 73     text-decoration:none;
 74     font-weight:bold;
 75     color:#fff;
 76 }
 77 .left{
 78     left:0;
 79 }
 80 .right{
 81     right: 0;
 82 }
 83 </style>
 84 <body>
 85     <div class="box">
 86         <ul>
 87             <li class="current"><img src="images/a.jpg" alt=""></li>
 88             <li><img src="images/b.jpg" alt=""></li>
 89             <li><img src="images/c.jpg" alt=""></li>
 90         </ul>
 91         <ol>
 92             <li class="current"></li>
 93             <li></li>
 94             <li></li>
 95         </ol>
 96         <!-- 如需显示小于号，我们必须这样写：&lt; 或 &#60; lt 是less than的首字母缩写,gt 是greater than的首字母缩写 -->
 97         <a href="javascript:;" class="left">&lt;</a>
 98         <a href="javascript:;" class="right">&gt;</a>
 99     </div>
100     <script>
101     var ulis = document.querySelectorAll("ul li");
102 var olis = document.querySelectorAll("ol li");
103 var box = document.querySelector(".box");
104 var leftbn = document.querySelector(".left");
105 var rightbn = document.querySelector(".right");
106 var timer;
107 var num = 0;
108 box.onmouseover=function(){
109     clearInterval(timer);
110 }
111 box.onmouseout=function(){
112     timer = setInterval(right,2000);
113 }
114 leftbn.onclick=left;
115 rightbn.onclick=right;
116 function left(){
117     num--;
118     if(num<0){
119         num = ulis.length-1;
120     }
121     move();
122 }
123 function move(){
124     for(var i=0;i<olis.length;i++){
125         olis[i].className = '';
126         ulis[i].className = '';
127     }
128     olis[num].className = 'current';
129     ulis[num].className = 'current';
130 }
131 
132 function right(){
133     num++;
134     if(num==ulis.length){
135         num = 0;
136     }
137     move()
138 }
139 timer = setInterval(right,2000);
140 for(var i=0;i<olis.length;i++){
141     olis[i].index = i;
142     olis[i].onclick=function(){
143         num = this.index;
144         move();
145         
146     }
147 }
148     </script>
149 </body>
150 </html>
效果: