基于jQuery的移动轮播图（支持触屏）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

移动轮播图我看到两款，

一款是无线天猫的m.tmall.com，实现了无缝轮播。

一款是蘑菇街的，没有实现无缝轮播。

我自己重写一个，类似蘑菇街

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基于jQuery的移动轮播图（支持触屏）</title>
<style type="text/css">
.WSCSlideWrapper{
width: 420px;
height: 180px;
position: relative; overflow: hidden;
}
.WSCSlide{
width: 1680px;
height: 100%;
font-size: 0; position: absolute; -webkit-transform:translate3d(0,0,0);
}
.WSCSlideTransition{
-webkit-transition: all 0.5s 0s ease-in-out;
}
.WSCSlide_img{
width: 420px;
height: 180px;
} </style>
</head>
<body>
<div class="WSCSlideWrapper">
<div class="WSCSlide WSCSlideTransition">
<img class="WSCSlide_img" src="1.jpg" />
<img class="WSCSlide_img" src="2.jpg" />
<img class="WSCSlide_img" src="3.jpg" />
</div>
<div class="WSCSlideStatus"></div>
</div><script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
// 基于jQuery的移动端轮播插件，用zepto会有with问题
// 返回值轮播对象
// 参数：
// WSCSlideTransition Transition的class名
// WSCSlideWrapper 轮播的jQuery对象
// WSCSlide 包裹轮播图片jQuery对象
// WSCSlide_img 轮播图片列表jQuery对象
// timerNum 循环时间
function WSCMobileSlide(arg_obj) {
/*
参数:
el是jQuery选择器返回值:
matrix.m41是x值 number
matrix.m42是y值 number
参考链接 http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery
参考链接 https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/javascript/instp/WebKitCSSMatrix/m41
*/
function getTransform(el) {
var style = window.getComputedStyle($(el).get(0));
var matrix = new WebKitCSSMatrix(style.webkitTransform);
return matrix;
} function slideAnimate(x, y) {
if (Math.abs(x) >= y) {
// $(".WSCSlide").removeClass("WSCSlideTransition");
$(".WSCSlide").css("-webkit-transform", "translate3d(0,0,0)");
} else {
// $(".WSCSlide").addClass("WSCSlideTransition");
$(".WSCSlide").css("-webkit-transform", "translate3d(" + x + "px,0,0)");
}
} function getSlideTimer(timeNum) {
if(typeof(timeNum) == "undefined"){
timeNum = 3000;
}
var slideTimer = setInterval(function() {
var x = getTransform(".WSCSlide").m41;
x = x - ImgWidth;
slideAnimate(x, endPosition); }, timeNum);
return slideTimer;
} function touchDragMe($element) {
var gundongX = 0;
var gundongY = 0;
var d = document;
var g = 'getElementById';
var moveEle = $element;
var stx = sty = etx = ety = curX = curY = 0; moveEle.on("touchstart", function(event) { //touchstart
$element.removeClass(transitionName);
clearInterval(slideTimer);
var event = event.originalEvent;
gundongX = 0;
gundongY = 0; // 元素当前位置
etx = parseInt(getT3d(moveEle, "x"));
ety = parseInt(getT3d(moveEle, "y")); // 手指位置
stx = event.touches[0].pageX;
sty = event.touches[0].pageY;
}); moveEle.on("touchmove", function(event) {
var event = event.originalEvent;
// 防止拖动页面
event.preventDefault(); // 手指位置减去元素当前位置就是要移动的距离
gundongX = event.touches[0].pageX - stx;
gundongY = event.touches[0].pageY - sty; // 目标位置就是要移动的距离加上元素当前位置
curX = gundongX + etx;
curY = gundongY + ety; // 自由移动
// moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)';
// 只能移动Y轴方向
// var realMoveEle = moveEle[0];
moveEle[0].style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + 0 + 'px,0px)'; });
moveEle.on("touchend", function(event) {
// 手指接触屏幕的位置
var oriX = etx;
var oriY = ety; // 手指离开屏幕的位置
etx = curX;
ety = curY; var slidePosition = 0;
for (var i = 0; i < ImgWidth_arr_length - 1; i++) {
if (Math.abs(etx) > ImgWidth_arr[i]) { if (oriX > etx) {
// 左滑
slidePosition = -ImgWidth_arr[i + 1];
} else {
// 右滑
slidePosition = -ImgWidth_arr[i];
}
} }
$element.addClass(transitionName);
slideAnimate(slidePosition, endPosition);
slideTimer = getSlideTimer(timerNum);
}); function getT3d(elem, ename) {
var elem = elem[0];
var str1 = elem.style.webkitTransform;
if (str1 == "") return "0";
str1 = str1.replace("translate3d(", "");
str1 = str1.replace(")", "");
var carr = str1.split(","); if (ename == "x") return carr[0];
else if (ename == "y") return carr[1];
else if (ename == "z") return carr[2];
else return "";
}
} var transitionName = arg_obj["WSCSlideTransition"] || "WSCSlideTransition";
var $WSCSlideWrapper = arg_obj["WSCSlideWrapper"] || $(".WSCSlideWrapper");
var $WSCSlide = arg_obj["WSCSlide"] || $(".WSCSlide");
var $WSCSlide_img = arg_obj["WSCSlide_img"] || $(".WSCSlide_img");
var timerNum = arg_obj["timerNum"] || 3000; $WSCSlide_img.width($WSCSlideWrapper.width());
$WSCSlide_img.height($WSCSlideWrapper.height()); var ImgWidth_arr_length = $WSCSlide_img.length;
var ImgWidth = $WSCSlide_img.width(); $WSCSlide.width(ImgWidth * ImgWidth_arr_length); var WSCSlideWidth = $WSCSlide.width();
// 轮播图终止位置
var endPosition = WSCSlideWidth - ImgWidth; var ImgWidth_arr = [];
for (var i = 0; i < ImgWidth_arr_length; i++) {
ImgWidth_arr.push(i * ImgWidth);
}
// console.log(ImgWidth_arr); var slideTimer = getSlideTimer(timerNum); touchDragMe($WSCSlide, slideTimer); return slideTimer;
}
WSCMobileSlide({
"WSCSlideTransition": "WSCSlideTransition",
"WSCSlideWrapper": $(".WSCSlideWrapper"),
"WSCSlide": $(".WSCSlide"),
"WSCSlide_img": $(".WSCSlide_img"),
"timerNum": 3000
});</script>
</body>
</html>