MUI实现图片无缝轮播

Love The Way You Lie 2022-05-07 18:58 237阅读 0赞

## MUI实现图片无缝轮播 ##

#### 引入相关包 ####

<link rel="stylesheet" href="lib/mui/css/mui.css">
    
    <script src="lib/mui/js/mui.js"></script>

#### HTML结构 ####

<div class="mui-slider">
    
    
    	<div class="mui-slider-group mui-slider-loop">
      		
    		
    		<div class="mui-slider-item mui-slider-item-duplicate">
      			<a href="#">
          			<img src="images/banner6.png" alt="">
      			</a>
    		</div>
    		<div class="mui-slider-item">
      			<a href="#">
          			<img src="images/banner1.png" alt="">
      			</a>
    		</div>
    		  <div class="mui-slider-item">
    		      <a href="#">
    		          <img src="images/banner2.png" alt="">
    		      </a>
    		  </div>
    		  <div class="mui-slider-item">
    		      <a href="#">
    		          <img src="images/banner3.png" alt="">
    		      </a>
    		  </div>
    		  <div class="mui-slider-item">
    		      <a href="#">
    		          <img src="images/banner4.png" alt="">
    		      </a>
    		  </div>
    		  <div class="mui-slider-item">
    		      <a href="#">
    		          <img src="images/banner5.png" alt="">
    		      </a>
    		  </div>
    		  <div class="mui-slider-item">
    		      <a href="#">
    		          <img src="images/banner6.png" alt="">
    		      </a>
    		  </div>
    		  
    		  <div class="mui-slider-item mui-slider-item-duplicate">
    		      <a href="#">
    		          <img src="images/banner1.png" alt="">
    		      </a>
    		  </div>
    	</div>
    	  
    	<div class="mui-slider-indicator">
    	      <div class="mui-indicator mui-active"></div>
    	      <div class="mui-indicator"></div>
    	      <div class="mui-indicator"></div>
    	      <div class="mui-indicator"></div>
    	      <div class="mui-indicator"></div>
    	      <div class="mui-indicator"></div>
    	 </div>
    </div>

#### 初始化轮播图 ####

/*获得slider插件对象*/
    var gallery = mui('.mui-slider');
    /*调用slider初始化轮播图*/
    gallery.slider({
    	  /*自动轮播图的间隔时间*/
    	  interval: 1000 
    });

[MUI官方文档][MUI]

[MUI]: http://dev.dcloud.net.cn/mui/ui/

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现图片轮播效果

引言图片轮播效果大多数会在出现在商品的详情页或应用首页，它可以用来展示商品详情，也可以用来展示广告信息，活动信息等，所以平时练习一下图片轮播效果的实现还是很有必...

比眉伴天荒/ 2024年04月17日 16:02/ 0 赞/ 94 阅读

相关无缝轮播/自动轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

爱被打了一巴掌/ 2022年10月27日 00:30/ 0 赞/ 336 阅读

相关 MUI-图片轮播控件

图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；在MUI框架中针对图片的轮播做了一个简单的封装。 DOM结构默认不支持循环播放，DOM

桃扇骨/ 2022年08月09日 13:43/ 0 赞/ 250 阅读

相关【MUI】图片轮播

引言 MUI是最接近原生APP体验的高性能前端框架。最近在做的积分系统手机端就是用的MUI，我负责的是主界面的部分，需要显示公司的宣传图片，就类似于去逛街的时候外

末蓝、/ 2022年06月08日 06:15/ 0 赞/ 247 阅读

相关 js定时器实现图片的无缝轮播

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无缝滚动轮播图</title>

梦里梦外;/ 2022年06月02日 02:38/ 0 赞/ 273 阅读

相关 MUI实现图片无缝轮播

MUI实现图片无缝轮播引入相关包  <link rel="stylesheet

Love The Way You Lie/ 2022年05月07日 18:58/ 0 赞/ 238 阅读

相关 MUI实现图片无缝轮播

MUI实现图片无缝轮播引入相关包  <link rel="stylesheet

我不是女神ヾ/ 2022年05月07日 04:54/ 0 赞/ 301 阅读

相关 mui 图片自动轮播

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

你的名字/ 2022年04月22日 02:16/ 0 赞/ 241 阅读

相关 js计时器实现图片的无缝轮播和简单的图片切换轮播

> 几个注意事项： > ① 给某一标签设置了固定定位后，设置width:100%是以浏览器做参考的。 > ② 给某一元素设置了绝对定位时，且父元素未设置定位，会去找离该

一时失言乱红尘/ 2021年10月23日 13:20/ 0 赞/ 414 阅读

相关 Jquery+css实现图片无缝滚动轮播

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷...

系统管理员/ 2021年01月27日 15:32/ 0 赞/ 818 阅读