MUI-图片轮播控件

最新推荐文章于 2024-04-23 10:35:10 发布

BruceCheng夏夏

最新推荐文章于 2024-04-23 10:35:10 发布

阅读量3.1w

点赞数 6

分类专栏：移动开发MUI框架文章标签： mui gallery 轮播图片轮播

本文链接：https://blog.youkuaiyun.com/brucecheng22/article/details/49422939

版权

MUI图片轮播控件基于slide插件，具备循环和非循环两种模式。循环模式下，左滑返回第一张，右滑则在末尾重复图片；非循环模式下，左右滑动受限。实现循环效果需添加特定类和额外图片。通过JS方法如间隔设置（interval）和gotoItem，可手动控制轮播和跳转到指定图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；

在MUI框架中针对图片的轮播做了一个简单的封装。

DOM结构

默认不支持循环播放，DOM结构如下：

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>

假设当前图片轮播中有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：

（1）循环模式：继续左划则显示第一张。

（2）非循环模式：左划没有任何反应。如需要翻到第一张，则需要一直右划到第一张才行。
当显示第1张图片时，继续右滑是否显示第4张图片，是同样问题；这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制；

若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：