简单的移动端幻灯片插件

工作养老，开发了个H5移动端滑动插件练练手，简单轻量，bug应该不少。

<link rel="stylesheet" type="text/css" href="./slide.css"> html

<div class="mg-slide s1"> <div class="mg-slide-container"> <div class="mg-slide-item"> <div class="img" style="background-image: url(./1.jpg);"></div> </div> <div class="mg-slide-item"> <div class="img" style="background-image: url(./2.png);"></div> </div> <div class="mg-slide-item"> <div class="img" style="background-image: url(./3.jpg);"></div> </div> <div class="mg-slide-item"> <div class="img" style="background-image: url(./1.jpg);"></div> </div> <div class="mg-slide-item"> <div class="img" style="background-image: url(./2.png);"></div> </div> </div> </div> js

<script type="text/javascript" src="./slide.js"></script> <script type="text/javascript"> const slide = new mSlide('.slide') </script> 开发思路 css

较多，核心部分，思路是mg-slide为固定的容器，超出部分隐藏。mg-slide-container是内容，主要就是控制它的位置(translate3d)。 will-change。

.mg-slide { width: 100%; overflow: hidden; position: relative; } .mg-slide-container { transition-property: transform; overflow: hidden; will-change: transform; } js

通过touch事件控制mg-slide-container位置，目前有默认的4个配置项，具体看代码吧。