移動端左右切換幻燈片開源組件

• 2019 年 12 月 5 日
• 筆記

mobile-swiper

經常會用到移動端左右切換幻燈片組件，今天提取了一個簡易的方便後續使用。組件無任何依賴直接即可以使用。DEMO中使用了 touchstart 和 touchend` 事件，所以僅適用於移動端。

用法：

首先調用mobile-swiper.js

<script src="mobile-swiper.js"></script>

CSS程式碼：

html, body {          font-size: 20px;          margin: 0;          padding: 0;          background-color: #efefef;           overflow: hidden;  }  ul, li {          list-style: none;          margin: 0;          padding: 0;  }  ul {    position: relative;    width: 17.75rem;    height: 6.6rem;    margin: 1.3rem auto;  }  li {    position: absolute;    width: 5.4rem;    height: 6.6rem;    left: 50%;    margin-left: -2.7rem;  }  li img {    display: block;    width: 100%;    height: 100%;    border-radius: 0.15rem;  }

要求html ，#selector 是以下結構：

<ul id="selector">  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  </ul>