轮播图 / Slider

优质

小牛编辑

128浏览

2023-12-01

自动轮播

设置参数auto为true, 控件会在完成render后开始播放, 即开始轮播.

或者调用slider.play()/slider.stop()来开始/暂停播放

<div class="container">
  <div id="slider-container-default">
    <!-- 请注意，下边这个 stage 中不要出现空白字符，否则对效果有影响 -->
    <div data-role="stage">
<img src="http://pic.hefei.cc/newcms/2012/03/14/13316929284f6005808aa20.jpg">
<img src="http://pic.hefei.cc/newcms/2012/03/14/13316929274f60057f72733.jpg">
<img src="http://pic.hefei.cc/newcms/2012/03/14/13316929284f60058013da9.jpg">
<img src="http://pic.hefei.cc/newcms/2012/03/14/13316929294f600581a07e5.jpg">
    </div>
  </div>
</div>

require(['moye/Slider'], function (Slider) {

  new Slider({
    main: document.getElementById('slider-container-default'),
    anim: 'slide',
    auto: true
  }).render();

});

各种切换动画效果
滑动(slide)垂直方向切换

require(['moye/Slider'], function (Slider) {

  new Slider({
    main: document.getElementById('slider-container-default'),
    anim: 'slide',
    auto: true,
    animOptions: {
      direction: 'vertical'
    }
  }).render();

});

透明渐变

require(['moye/Slider'], function (Slider) {

  new Slider({
    main: document.getElementById('slider-container-default'),
    anim: 'opacity',
    auto: true
  }).render();

});