zoukankan      html  css  js  c++  java
  • 19、图片轮播

     

    1, 支持循环

    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/2.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div>
        <!--支持循环,需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/0.jpg" /></a></div>
      </div>
    </div>

    2, 不支持循环 和循环不同的是没有再第一条和最后一条后面加入内容

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

    JavaScript部分相同:

    //获得slider插件对象
    var gallery = mui('.mui-slider');
    gallery.slider({
      interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
    });
     
    document.querySelector('.mui-slider').addEventListener('slide', function(event) {
      //注意slideNumber是从0开始的;
      alert("你正在看第"+(event.detail.slideNumber+1)+"张图片");
    });

    注意:如果ajax获得图片后,需要在写入图片以后,需要从新调用一下

    gallery.slider();

  • 相关阅读:
    echarts各个配置项详细说明总结
    享元模式
    观察者模式
    策略模式
    桥接模式
    适配器模式
    建造者模式
    原型模式
    单例模式
    Java8新特性——集合底层源码实现的改变
  • 原文地址:https://www.cnblogs.com/zhouyuxiang/p/4925364.html
Copyright © 2011-2022 走看看