基本功能

  • 轮回播放
  • 自定义过渡时间、间隔时间
  • 上一张、下一张

完整代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style>
  8.     * {
  9.       padding: 0;
  10.       margin: 0;
  11.     }
  13.     .container {
  14.       width: 126px;
  15.       height: 86px;
  16.       overflow: hidden;
  17.       margin: 100px auto;
  18.       background-color: aquamarine;
  19.     }
  21.     .swiper {
  22.       list-style: none;
  23.       display: flex;
  24.       /* transition: all 400ms ease-in-out; */
  25.     }
  27.     .swiper:hover {
  28.       animation-play-state: paused;
  29.     }
  31.     .item {
  32.       flex-basis: 126px;
  33.       flex-shrink: 0;
  34.       width: 126px;
  35.       height: 86px;
  36.       background: rgba(11, 22, 11, .4);
  37.       box-sizing: border-box;
  38.       border: 2px solid red;
  39.     }
  41.     .img {
  42.       width: 100%;
  43.       height: 100%;
  44.       overflow: hidden;
  45.     }
  48.     .control {
  49.       display: flex;
  50.       justify-content: center;
  51.     }
  52.   </style>
  53. </head>
  55. <body>
  56.   <div class="container">
  57.     <ul class="swiper">
  58.       <li class="item">
  59.         <!-- 1 -->
  60.         <img class="img" src="images/1.jpg" alt="" />
  61.       </li>
  62.       <li class="item">
  63.         <!-- 2 -->
  64.         <img class="img" src="images/2.jpg" alt="" />
  65.       </li>
  66.       <li class="item">
  67.         <!-- 3 -->
  68.         <img class="img" src="images/3.jpg" alt="" />
  69.       </li>
  70.       <li class="item">
  71.         <!-- 4 -->
  72.         <img class="img" src="images/4.jpg" alt="" />
  73.       </li>
  74.       <li class="item">
  75.         <!-- 5 -->
  76.         <img class="img" src="images/5.jpg" alt="" />
  77.       </li>
  78.       <li class="item">
  79.         <!-- 6 -->
  80.         <img class="img" src="images/6.jpg" alt="" />
  81.       </li>
  82.       <li class="item">
  83.         <!-- 7 -->
  84.         <img class="img" src="images/7.jpg" alt="" />
  85.       </li>
  86.     </ul>
  87.   </div>
  88.   <div class="control">
  89.     <div>
  90.       轮播间隔：
  91.       <input id="input1" type="text" value="800">
  92.       <br />
  93.       过渡时间：
  94.       <input id="input2" type="text" value="400">
  95.       <br />
  96.       <button id="btn">重置轮播</button>
  97.       <br />
  98.       <button id="pre">上一张</button>
  99.       <button id="next">下一张</button>
  100.     </div>
  101.   </div>
  103.   <script>
  104.     window.onload = function () {
  105.       const swiper = document.querySelectorAll('.swiper')[0]
  106.       const count = document.querySelectorAll('.item').length
  107.       let timer
  108.       let mark = -1
  109.       let i = 0
  111.       const getI = (i) => {
  112.         if (i < 1 || (i < count - 1 && i > mark)) {
  113.           mark = i
  114.           return ++i
  115.         } else {
  116.           --i
  117.           mark = i
  118.           return i
  119.         }
  120.       }
  122.       const refrence = () => {
  123.         clearInterval(timer)
  124.         const interval = document.querySelector('#input1').value
  125.         const duration = document.querySelector('#input2').value
  126.         console.log(interval, duration)
  127.         swiper.style.transition = `all ${duration}ms ease-in-out`
  128.         timer = setInterval(() => {
  129.           i = getI(i)
  130.           swiper.style.transform = `translate(${-126 * i}px)`
  131.         }, interval)
  132.       }
  134.       refrence()
  136.       document.querySelector('#btn').onclick = refrence
  138.       document.querySelector('#pre').onclick = () => {
  139.         i = getI(i)
  140.         swiper.style.transform = `translate(${-126 * i}px)`
  141.       }
  143.       document.querySelector('#next').onclick = () => {
  144.         i = getI(i)
  145.         swiper.style.transform = `translate(${-126 * i}px)`
  146.       }
  148.     }
  150.   </script>
  151. </body>
  153. </html>

样图

image.png

依赖

无

优化

上一张、下一张有问题

完整代码

https://github.com/withwz/swiper