轮播图轻量级写法

Posted 2022-08-20 qihang0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图轻量级写法相关的知识，希望对你有一定的参考价值。

  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     width: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     width:900px;
 26     height: 500px;
 27     display:none;
 28 
 29 .box ul li img
 30     width: 900px;
 31     height: 500px;
 32 
 33 .box ol
 34     width: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     width: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     width: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" ></li>
 88             <li><img src="images/b.jpg" ></li>
 89             <li><img src="images/c.jpg" ></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>

效果:

技术图片

以上是关于轮播图轻量级写法的主要内容，如果未能解决你的问题，请参考以下文章