怎样实现H5+CSS3手指滑动切换图片的示例代码

2020-04-21 22:51:07易采站长站整理

if (t.length == 1 && !self.busy) {
return self.move(t[0].screenX, t[0].screenY); //这里根据返回值觉得是否阻止默认touch事件
}
}).bind('touchend',
function(e) { ! self.busy && self.move_end();
});
},
/*
初始化循环滚动,当一次性需要滚动多个子元素时,暂不支持循环滚动效果,
如果想实现一次性滚动多个子元素效果,可以通过页面结构实现
循环滚动思路:复制首尾节点到尾首
*/
init_loop: function() {
if (this.box.children().length > 1 && this.box.children().length == this.size && this.loop) { //暂时只支持size和子节点数相等情况的循环
this.now_left = -this.width; //设置初始位置信息
this.minleft = -this.width * this.size; //最小left值
this.maxleft = -this.width;
this.box.prepend(this.box.children().eq(this.size - 1).clone()).append(this.box.children().eq(1).clone()).css(this.get_style(2));
this.box.css('width', this.width * (this.size + 2));
} else {
this.loop = false;
this.box.css('width', this.width * this.size);
}
},
auto_scroll: function() { //自动滚动
var self = this;
if (!self.auto) return;
clearTimeout(self.timer);
self.timer = setTimeout(function() {
self.go_index(self.index + 1);
},
self.auto_wait_time);
},
go_index: function(ind) { //滚动到指定索引页面
var self = this;
if (self.busy) return;
clearTimeout(self.timer);
self.busy = true;
if (self.loop) { //如果循环
ind = ind < 0 ? -1 : ind;
ind = ind > self.size ? self.size: ind;
} else {
ind = ind < 0 ? 0 : ind;
ind = ind >= self.size ? (self.size - 1) : ind;
}
if (!self.loop && (self.now_left == -(self.width * ind))) {
self.complete(ind);
} else if (self.loop && (self.now_left == -self.width * (ind + 1))) {
self.complete(ind);
} else {
if (ind == -1 || ind == self.size) { //循环滚动边界
self.index = ind == -1 ? (self.size - 1) : 0;
self.now_left = ind == -1 ? 0 : -self.width * (self.size + 1);
} else {
self.index = ind;
self.now_left = -(self.width * (self.index + (self.loop ? 1 : 0)));
}
self.box.css(this.get_style(1));
setTimeout(function() {
self.complete(ind);
},
self.scroll_time);
}
},
complete: function(ind) { //动画完成回调
var self = this;
self.busy = false;
self.config.callback && self.config.callback(self.index);
if (ind == -1) {
self.now_left = self.minleft;
} else if (ind == self.size) {
self.now_left = self.maxleft;
}
self.box.css(this.get_style(2));
self.auto_scroll();
},
next: function() { //下一页滚动
if (!this.busy) {
this.go_index(this.index + 1);
}
},
prev: function() { //上一页滚动
if (!this.busy) {
this.go_index(this.index - 1);