请选择 进入手机版 | 继续访问电脑版

极客蜗牛

查看: 256|回复: 0

MUI 轮播组件

[复制链接]

82

主题

99

帖子

657

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
657
QQ
发表于 2017-12-8 16:19:16 | 显示全部楼层 |阅读模式
HTML代码
  1.   <div class="mui-slider stf_banner">
  2.                         <div class="mui-slider-group mui-slider-loop">
  3.                                 <!--支持循环,需要重复图片节点-->
  4.                                 <div class="mui-slider-item mui-slider-item-duplicate">
  5.                                         <img src="img/main/b3.jpg" alt="" />
  6.                                 </div>
  7.                                 <!--第一个内容区容器-->
  8.                                 <div class="mui-slider-item" id="item1">
  9.                                         <img src="img/main/b1.jpg" alt="" />
  10.                                 </div>
  11.                                 <!--第二个内容区-->
  12.                                 <div class="mui-slider-item" id="item1">
  13.                                         <img src="img/main/b2.jpg" alt="" />
  14.                                 </div>
  15.                                 <!--第三个内容区-->
  16.                                 <div class="mui-slider-item" id="item3">
  17.                                         <img src="img/main/b3.jpg" alt="" />
  18.                                 </div>
  19.                                 <!--支持循环,需要重复图片节点-->
  20.                                 <div class="mui-slider-item mui-slider-item-duplicate" >
  21.                                         <img src="img/main/b1.jpg" alt="" />
  22.                                 </div>
  23.                         </div>
  24.                         <div class="mui-slider-indicator">
  25.                                 <div class="mui-indicator mui-active"></div>
  26.                                 <div class="mui-indicator"></div>
  27.                                 <div class="mui-indicator"></div>

  28.                         </div>
  29.                 </div>
复制代码


JS代码
  1. var gallery = mui('.mui-slider');
  2.      gallery.slider({
  3.      interval: 3000 //自动轮播周期,若为0则不自动播放,默认为0;
  4.                         });
复制代码













回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|极客蜗牛

GMT+8, 2019-6-24 20:30 , Processed in 0.054046 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表