html5图⽚⾃动滑动，怎样实现H5+CSS3⼿指滑动切换图⽚的⽰
例代码
包含3个⽂件：html、slider-H5.js、jquery.js。在html中可配置滑动参数。具体代码如下：
HTML代码：
/>
H5⼿指滑动切换图⽚
ul,li{margin:0;padding:0;} @media screen and (min-width:240px) { html,
body{ font-size:9px; } } @media screen and (min-width:320px) { html, body{
font-size:12px; } } @media screen and (min-width:480px) { html, body{ font-size:18px;
} } @media screen and (min-width:640px) { html, body{ font-size:24px; }
} @media screen and (min-width:960px) { html, body{ font-size:36px; } }
div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;} div.imgbox
ul{clear:both;width:75rem;display: inline-block;} div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}
div.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;}
这⾥通过回调显⽰当前滚动到多少页:
(function() {
/*
注意：$.mggScrollImg返回的scrollImg对象上有
next，prev，go三个⽅法，可以实现外部对滚动索引的控制。
如：();//会切换到下⼀张图⽚
<(0);//会切换到第⼀张图⽚
*/
var scrollImg = $.mggScrollImg('.imgbox ul', {
loop: true,
//循环切换
auto: true,
//⾃动切换
auto_wait_time: 3000,
/
/轮播间隔
scroll_time: 300,
//滚动时长
callback: function(ind) { //这⾥传过来的是索引值
$('#page').text(ind + 1);
}
});
})()
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);
config || {});
this.width = fig.width || this.box.children().eq(0).width(); //⼀次滚动的宽度
this.size = fig.size || this.box.children().length;
this.loop = fig.loop !== undefined ? (fig.loop == true ? true: false) : true; //默认能循环滚动
this.auto = fig.auto !== undefined ? (fig.auto == true ? true: false) : true; //默认⾃动滚动
this.auto_wait_time = fig.auto_wait_time || 3000; //轮播间隔
this.scroll_time = fig.scroll_time !== undefined ? (fig.scroll_time > 0 ? fig.scroll_time: 0) : 300; //滚动时长
this.minleft = -this.width * (this.size - 1); //最⼩left值，注意是负数[不循环情况下的值]
this.maxleft = 0; //最⼤lfet值[不循环情况下的值]
this.point_x = null; //记录⼀个x坐标
this.point_y = null; //记录⼀个y坐标
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) {
html滚动效果代码
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;
if (t.length == 1 && !self.busy) {
ve(t[0].screenX, t[0].screenY); //这⾥根据返回值觉得是否阻⽌默认touch事件
}
}).bind('touchend',
function(e) { ! self.busy && ve_end();
});
},
/*
初始化循环滚动，当⼀次性需要滚动多个⼦元素时，暂不⽀持循环滚动效果,
如果想实现⼀次性滚动多个⼦元素效果，可以通过页⾯结构实现
循环滚动思路：复制⾸尾节点到尾⾸
*/
init_loop: function() {
if (this.box.children().length > 1 && this.box.children().length == this.size && this.loop) { //暂时只⽀持size和⼦节点数相等情况的循环
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())._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() {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。