手机端jQuery触屏滑动图片切换代码是一款触屏滑动图片左右滚动展示代码。
(function ($) {
$.fn.leftScroll = function (option) {
var data = {
isOneScreen: true,
isScroll: true
};
var options = $.extend(data,option);
this.each(function () {
var that = this;
var len = $(this).find(".leftScroll_picBox").length;
var clone = $(this).find(".leftScroll_picBox").clone(true);
var clone2 = $(this).find(".leftScroll_picBox").clone(true);
$(this).children().append(clone);
$(this).children().append(clone2);
var width = $(this).find(".leftScroll_picBox").eq(0).innerWidth();
var left = len;
var container = $(this).children();
container.css("left",(-left*width)+"px");
var touch1,touch2,pageX1=0,pageX2=0,pageY1=0,pageY2=0;
var startHandle = function (that) {
container.addClass("transition");
touch1 = that.originalEvent.touches[0];
pageX1 = touch1.pageX;
pageY1 = touch1.pageY;
};
var moveHandle = function (that) {
touch2 = that.originalEvent.touches[0];
pageX2 = touch2.pageX;
pageY2 = touch2.pageY;
if(Math.abs(pageY2-pageY1)>Math.abs(pageX2-pageX1)){
return
}else {
that.preventDefault();
container.css("left",((-left*width)+(pageX2 - pageX1))+"px");
}
};
var endHandle = function (that) {
var deltaX = pageX2 - pageX1;
var deltaY = pageY2 - pageY1;
if(Math.abs(deltaY)>Math.abs(deltaX)){
container.css("left",(-left*width)+"px");
return
}else {
if(deltaX<0){
if(left<((len*2)+1)){
left=left+1;
container.css("left",(-left*width)+"px");
if(left===((len*2)+1)){
setTimeout(function () {
container.removeClass("transition");
container.css("left",-len*width);
left = len;
},200)
}
$(that).on("touchstart",startHandle)
}
}else {
if(left>0){
left=left- 1;
container.css("left",(-left*width)+"px");
if(left===0){
setTimeout(function () {
container.removeClass("transition");
container.css("left",-len*width);
left = len;
},200);
$(that).on("touchstart",startHandle)
}
}
}
}
};
if(options.isScroll===true){
$(that).on("touchstart",startHandle);
$(that).on("touchmove",moveHandle);
$(that).on("touchend",endHandle);
}
});
}
})(jQuery);