jQuery手机触屏滑动图片轮播效果代码_移动端图片拖拽切换插件touchSlider.js

下载地址

使用方法引用js插件和css样式表

HTML结构很简单

1 2 3 4 5

img 1 img 2 img 3 img 4 img 5

js调用实现触屏滑动图片切换$(".img_gallery").hover(function(){ $("#btn_prev,#btn_next").fadeIn() },function(){ $("#btn_prev,#btn_next").fadeOut() }); $dragBln = false; $(".main_img").touchSlider({ flexible : true, speed : 200, btn_prev : $("#btn_prev"), btn_next : $("#btn_next"), paging : $(".point a"), counter : function (e){ $(".point a").removeClass("on").eq(e.current-1).addClass("on");//图片顺序点切换 $(".img_font span").hide().eq(e.current-1).show();//图片文字切换 } }); $(".main_img").bind("mousedown", function() { $dragBln = false; }); $(".main_img").bind("dragstart", function() { $dragBln = true; }); $(".main_img a").click(function(){ if($dragBln) { return false; } }); timer = setInterval(function(){ $("#btn_next").click(); }, 5000); $(".img_gallery").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ $("#btn_next").click(); },5000); }); $(".main_img").bind("touchstart",function(){ clearInterval(timer); }).bind("touchend", function(){ timer = setInterval(function(){ $("#btn_next").click(); }, 5000); });

dd: