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);
});
0 个回复