轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>轮播图</title>
  8.     <style>
  9.             .img {
  10.       position: absolute;
  11.       top: 100px;
  12.       left: 50%;
  13.       width: 480px;
  14.       height: 270px;
  15.       margin-left: -240px;
  16.       color: #FFFFFF;
  17.       /*设置图片默认透明度为0 */
  18.       opacity: 0;
  19.       /*设置图片过度效果， 会出现淡入淡出效果 */
  20.       transition: all .8s;
  21.     }
  22.     .img:nth-child(1){
  23.       background: url("/lesson-19/0411/images/1.jpg");
  24.       background-size:100%;
  25.       border-radius: 10px;
  26.     }
  27.     .img:nth-child(2){
  28.       background: url("/lesson-19/0411/images/2.jpg");
  29.       background-size: 100%;
  30.       border-radius: 10px;
  32.     }
  33.     .img:nth-child(3){
  34.       background: url("/lesson-19/0411/images/3.jpg");
  35.       background-size: 100%;
  36.       border-radius: 10px;
  38.     }
  39.     .prev {
  40.       position: absolute;
  41.       top: 185px;
  42.       left: 50%;
  43.       width: 20px;
  44.       height: 30px;
  45.       border: 1px solid rgba(255, 255, 255, .2);
  46.       border-radius: 0 5px 5px 0;
  47.       margin-top: 30px;
  48.       margin-left: -240px;
  49.       color: #c2c1cb;
  50.       text-align: center;
  51.       background-color: rgba(255, 255, 255, .2);
  52.       cursor: pointer;
  53.     }
  54.     .next {
  55.       position: absolute;
  56.       top: 185px;
  57.       left: 50%;
  58.       width: 20px;
  59.       height: 30px;
  60.       border: 1px solid rgba(255, 255, 255, .2);
  61.       border-radius:  5px 0 0 5px;
  62.       margin-top: 30px;
  63.       margin-left: 218px;
  64.       color: #c2c1cb;
  65.       text-align: center;
  66.       background-color: rgba(255, 255, 255, .2);
  67.       cursor: pointer;
  68.     }
  69.     .next:hover,
  70.     .prev:hover {
  71.       background-color: rgba(1, 1, 1, 0.73);
  72.       color: #FFFFFF;
  73.     }
  74.     .div1 {
  75.       position: absolute;
  76.       top: 350px;
  77.       left: 50%;
  78.       margin-left: -40px;
  79.     }
  80.     .little {
  81.       float: left;
  82.       width: 10px;
  83.       height: 10px;
  84.       border-radius: 100%;
  85.       background-color: rgba(255, 245, 244, .3);
  86.       margin-left: 20px;
  87.       cursor: pointer;
  88.       border: 1px solid #464646;
  89.     }
  90.     .show{
  91.     /*通过添加show，改变图片透明度，从而实现切换效果*/
  92.       opacity: 1;
  93.     }
  94.     .little_show {
  95.       background-color: #FFFFFF;
  96.     }
  98.     </style>
  99. </head>
  100. <body>
  101.     <div id="Box">
  102.         <div class="img show"></div>
  103.         <div class="img"></div>
  104.         <div class="img"></div>
  106.         <!--上一张按钮-->
  107.         <span class="prev"><</span>
  108.         <!--下一张按钮-->
  109.         <span class="next">></span>
  111.         <div class="div1">
  112.           <span class="little little_show" data-index="0"></span>
  113.           <span class="little" data-index="1"></span>
  114.           <span class="little" data-index="2"></span>
  115.         </div>
  116.       </div>
  117.       <script>
  118.         let img = document.getElementsByClassName("img"); //获取所有轮播图片 集合
  119.         let next = document.querySelector(".next"); //获取下一张 按钮
  120.         let prev = document.querySelector(".prev");//获取上一张 按钮
  121.         let box = document.getElementById("Box");//获取整个盒子
  122.         let little = document.getElementsByClassName("little"); //获取所有轮播圆点按钮 集合
  124.         let index = 0;
  125.         let time = 0;
  127. // 重置所有class
  128. let clear = function () {
  129.   for (let i = 0;i < img.length; i++){
  130.     img[i].className = "img";
  131.   }
  132.   for (let i = 0;i < little.length;i++){
  133.     little[i].className = "little";
  134.   }
  135. };
  137. let show = function () {
  138.   img[index].className = "img show";
  139.   little[index].className = "little little_show";
  140.   time = 0;
  141. };
  143. // 下一张
  144. let nextBtn = function () {
  145.   clear();
  146.   index++;
  147.   if(index >img.length-1){
  148.     index = 0;
  149.   }
  150.   show();
  151. };
  152. next.addEventListener("click",function () {
  153.   nextBtn();
  154. });
  156. // 上一张
  157. let prevBtn = function () {
  158.   clear();
  159.     index--;
  160.   if(index < 0){
  161.     index = img.length-1;
  162.   }
  163.   show();
  164. };
  165. prev.addEventListener("click",function () {
  166.   prevBtn();
  167. });
  169. // 按钮
  170. for (let i = 0; i < little.length;i++){
  171.   little[i].addEventListener("click",function () {
  172.     clear();
  173.     index = this.getAttribute("data-index");
  174.     show();
  175.   })
  176. }
  178. let timer;//全局变量，接收定时器
  179. function autoTime(){
  180.   //timer接收定时器
  181.   timer = setInterval(function () {
  182.     time++;
  183.     if(time === 3){
  184.       nextBtn();
  185.     }
  186.     else if(time > 3){
  187.       time = 0;
  188.     }
  189.     // console.log("time = "+time);
  191.   },500);
  192. }
  193. // 调用轮播图自动播放方法
  194. autoTime();
  196. // 当鼠标移入imgBox时，停止轮播，清除定时器
  197. box.onmouseover = function () {
  198.   clearInterval(timer);
  199. };
  200. // 当鼠标移出imgBox时，重新调用定时器并重置time
  201. box.onmouseout = function () {
  202.   time = 0;
  203.   autoTime();
  204. };
  206.       </script>
  208. </body>
  209. </html>

效果