欧阳1
欧阳1
  • 发布:2016-11-16 16:32
  • 更新:2016-11-16 16:32
  • 阅读:5965

mui(slider).slider()关于这个滚动的一个问题

分类:MUI
复制代码
mui.ready(function() {  
    var slider = document.getElementById('Gallery');  
    var group = slider.querySelector('.mui-slider-group');  
    var items = mui('.mui-slider-item', group);  
    //克隆第一个节点  
    var first = items[0].cloneNode(true);  
    first.classList.add('mui-slider-item-duplicate');  
    //克隆最后一个节点  
    var last = items[items.length - 1].cloneNode(true);  
    last.classList.add('mui-slider-item-duplicate');  
    //处理是否循环逻辑,若支持循环,需支持两点:  
    //1、在.mui-slider-group节点上增加.mui-slider-loop类  
    //2、重复增加2个循环节点,图片顺序变为:N、1、2...N、1  
    var sliderApi = mui(slider).slider();  
        group.classList.add('mui-slider-loop');  
    group.insertBefore(last, group.firstChild);  
    group.appendChild(first);  
    sliderApi.refresh();  
});  

上面的代码是把左右滚动,有没有方法可以判断是向左滚动还是向右滚动?
如果是向左滚动就切换到下一页,如果是向右滚动就切换到上一页

如果横向滚动时,滚动的层只有一个,也就是items.length=1,下面的js滚动监控方法就不执行, 不知道这是bug还是就这样的。如果滚动项是多个,也只能获取当前需要显示的项的下标值。

复制代码
document.getElementById('slider').addEventListener('slide', function(e) {  
   var index=e.detail.slideNumber;  
  console.log(index);  
});  
2016-11-16 16:32 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容