轮播图（简易）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8     <title>Document</title>
  9 
 10     <style>
 11         .container {
 12             height: 300px;
 13             width: 500px;
 14             margin: 10px auto;
 15             overflow: hidden;
 16             position: relative;
 17         }
 18 
 19         .container .carousel img {
 20             height: 300px;
 21             width: 500px;
 22         }
 23 
 24         .container .carousel {
 25             width: 100%;
 26             height: 100%;
 27             display: flex;
 28             transition: 0.5s; /* 切换时平滑一些 */
 29         }
 30 
 31         .container .idicator {
 32             display: flex;
 33             position: absolute;
 34             bottom: 10px;
 35             left: 50%;
 36             transform: translateX(-50%);
 37             height: 15px;
 38 
 39         }
 40 
 41         .container .idicator span {
 42             border: 1px solid #ccc;
 43             width: 15px;
 44             height: 15px;
 45             margin-left: 5px;
 46             border-radius: 50%;
 47         }
 48 
 49         .container .idicator .active {
 50             background: #ccc;
 51             ;
 52         }
 53     </style>
 54 </head>
 55 
 56 <body>
 57     <div class="container">
 58         <div class="carousel">
 59             <div class="item"><img src="../vue/image/1087.jpg" alt="" class="width-height"></div>
 60             <div class="item"><img src="../vue/image/3046.jpg_wh300.jpg" alt="" class="width-height"></div>
 61             <div class="item"><img src="../vue/image/3247.jpg_wh300.jpg" alt="" class="width-height"></div>
 62             <div class="item"><img src="../vue/image/1091.jpg" alt="" class="width-height"></div>
 63             <div class="item"><img src="../vue/image/5041.jpg_wh300.jpg" alt="" class="width-height"></div>
 64         </div>
 65 
 66         <div class="idicator">
 67             <span class="active"></span>
 68             <span></span>
 69             <span></span>
 70             <span></span>
 71             <span></span>
 72         </div>
 73 
 74     </div>
 75 
 76     <script type="text/javascript"> 
 77         let carousel = document.querySelector('.carousel');
 78         let idicators = document.querySelectorAll('.idicator span');
 79         
 80         idicators.forEach(function (item, i) { 
 81             item.onclick = function(){
 82                 moveTo(i);
 83             }
 84         });
 85 
 86         // 移动版块到第几个
 87         function moveTo(index) {
 88 
 89             carousel.style.transform = 'translateX(-' + index + '00%)';
 90             // carousel.style['-webkit-transform'] = 'translateX(-' + index + '00%)';
 91 
 92             // 去掉当前选中的
 93             var active = document.querySelector('.idicator .active');
 94             active.classList.remove('active');
 95 
 96             // 重新设置
 97             idicators[index].classList.add('active');
 98         } 
 99     </script>
100 </body>
101 
102 </html>