*/
var scrollImg = $.mggScrollImg('.imgbox ul', {
loop: true,
//循环切换
auto: true,
//自动切换
auto_wait_time: 3000,
//轮播间隔
scroll_time: 300,
//滚动时长
callback: function(ind) { //这里传过来的是索引值
$('#page').text(ind + 1);
}
});
})()
</script>
</body>
</html>
slider-H5.js 代码：
(function($) {
/*
图片滚动效果
@jQuery or @String box : 滚动列表jQuery对象或者选择器 如：滚动元素为li的外层ul
@object config : {
@Number width : 一次滚动宽度，默认为box里面第一个一级子元素宽度[如果子元素宽度不均匀则滚动效果会错乱]@Number size : 列表长度，默认为box里面所有一级子元素个数[如果size不等于一级子元素个数，则不支持循环滚动]@Boolean loop : 是否支持循环滚动 默认 true
@Boolean auto : 是否自动滚动,支持自动滚动时必须支持循环滚动，否则设置无效,默认为true
@Number auto_wait_time : 自动轮播一次时间间隔,默认为：3000ms
@Function callback : 滚动完回调函数，参入一个参数当前滚动节点索引值
}
*/
function mggScrollImg(box, config) {
this.box = $(box);
this.config = $.extend({},
config || {});
this.width = this.config.width || this.box.children().eq(0).width(); //一次滚动的宽度
this.size = this.config.size || this.box.children().length;
this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true; //默认能循环滚动
this.auto = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //默认自动滚动
this.auto_wait_time = this.config.auto_wait_time || 3000; //轮播间隔
this.scroll_time = this.config.scroll_time !== undefined ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; //滚动时长
this.minleft = -this.width * (this.size - 1); //最小left值，注意是负数[不循环情况下的值]this.maxleft = 0; //最大lfet值[不循环情况下的值]this.now_left = 0; //初始位置信息[不循环情况下的值]this.point_x = null; //记录一个x坐标
this.point_y = null; //记录一个y坐标
this.move_left = false; //记录向哪边滑动
this.index = 0;
this.busy = false;
this.timer;
this.init();
}
$.extend(mggScrollImg.prototype, {
init: function() {
this.bind_event();
this.init_loop();
this.auto_scroll();
},
bind_event: function() {
var self = this;
self.box.bind('touchstart',
function(e) {
var t = e.touches ? e.touches: e.originalEvent.targetTouches;
if (t.length == 1 && !self.busy) {
self.point_x = t[0].screenX;
self.point_y = t[0].screenY;
}
}).bind('touchmove',
function(e) {
var t = e.touches ? e.touches: e.originalEvent.targetTouches;
