共计 7614 个字符，预计需要花费 20 分钟才能阅读完成。
包含 3 个文件：html、slider-H5.js、jquery.js。在 html 中可配置滑动参数。具体代码如下：
HTML 代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="seokeywords" />
<meta name="description" content="seodescription" />
<title>
H5 手指滑动切换图片
</title>
<style>
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;}
</style> // 欢迎加入全栈开发交流圈一起学习交流：1007317281
</head>
<body>
<div class="imgbox">
<ul>
<li>
<a href="#">
<img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg">
</img>
</a>
</li>
<li> // 欢迎加入全栈开发交流圈一起学习交流：1007317281
<a href="#">
<img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg">
</img>
</a>
</li>
<li>
<a href="#">
<img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg">
</img>
</a>
</li>
</ul>
</div>
<div>
这里通过回调显示当前滚动到多少页:
<span id="page">
0
</span>
</div>
<script src="jquery-1.10.2yuan.js">
</script>
<script src="slider-H5.js">
</script>
<script>
(function() {
/*
注意：$.mggScrollImg 返回的 scrollImg 对象上有
next，prev，go 三个方法，可以实现外部对滚动索引的控制。如：scrollImg.next();// 会切换到下一张图片
scrollImg.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);
}
});
})()
</script>
</body>
</html> // 欢迎加入全栈开发交流圈一起学习交流：1007317281slider-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();} // 欢迎加入全栈开发交流圈一起学习交流：1007317281
$.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;
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);
} // 欢迎加入全栈开发交流圈一起学习交流：1007317281
},
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);
} // 欢迎加入全栈开发交流圈一起学习交流：1007317281
},
move: function(point_x, point_y) { // 滑动屏幕处理函数
var changeX = point_x - (this.point_x === null ? point_x: this.point_x),
changeY = point_y - (this.point_y === null ? point_y: this.point_y),
marginleft = this.now_left,
return_value = false,
sin = changeY / Math.sqrt(changeX * changeX + changeY * changeY);
this.now_left = marginleft + changeX;
this.move_left = changeX < 0;
if (sin > Math.sin(Math.PI / 3) || sin < -Math.sin(Math.PI / 3)) { // 滑动屏幕角度范围：PI/3 -- 2PI/3
return_value = true; // 不阻止默认行为
}
this.point_x = point_x;
this.point_y = point_y;
this.box.css(this.get_style(2));
return return_value;
},
move_end: function() {
var changeX = this.now_left % this.width,
ind;
if (this.now_left < this.minleft) { // 手指向左滑动
ind = this.index + 1;
} else if (this.now_left > this.maxleft) { // 手指向右滑动
ind = this.index - 1;
} else if (changeX != 0) {if (this.move_left) { // 手指向左滑动
ind = this.index + 1;
} else { // 手指向右滑动
ind = this.index - 1;
}
} else {ind = this.index;}
this.point_x = this.point_y = null;
this.go_index(ind);
},
/*
获取动画样式，要兼容更多浏览器，可以扩展该方法
@int fig : 1 动画 2 没动画
*/
get_style: function(fig) {
var x = this.now_left,
time = fig == 1 ? this.scroll_time: 0;
return {
'-webkit-transition': '-webkit-transform' + time + 'ms',
'-webkit-transform': 'translate3d(' + x + 'px,0,0)',
'-webkit-backface-visibility': 'hidden',
'transition': 'transform' + time + 'ms',
'transform': 'translate3d(' + x + 'px,0,0)'
};
} // 欢迎加入全栈开发交流圈一起学习交流：1007317281
});
/*
这里对外提供调用接口，对外提供接口方法
next：下一页
prev：上一页
go：滚动到指定页
*/
$.mggScrollImg = function(box, config) {var scrollImg = new mggScrollImg(box, config);
return { // 对外提供接口
next: function() {scrollImg.next();
},
prev: function() {scrollImg.prev();
},
go: function(ind) {scrollImg.go_index(parseInt(ind) || 0);
}
}
}
})(jQuery)结语
感谢您的观看，如有不足之处，欢迎批评指正。
获取资料????????????
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular 以及面试资源等。
对 web 开发技术感兴趣的同学，欢迎加入 Q 群：????????????1007317281????????????，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意 offer，快速升职加薪，走上人生巅峰。
正文完
发表至： javascript
2019-04-30
