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

jQuery手机触屏滑动图片轮播效果代码_移动端图片拖拽切换插件touchSlider.js3336
使用方法引用js插件和css样式表
<link type="text/css" href="css/style.css" rel="stylesheet"/><script src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.event.drag.js"></script><script type="text/javascript" src="js/jquery.touchSlider.js"></script>
HTML结构很简单
<div class="img_gallery">	<div class="point">		<a href="#">1</a>		<a href="#">2</a>		<a href="#">3</a>		<a href="#">4</a>		<a href="#">5</a>	</div>	<div class="main_img">		<ul>			<li><span class="img_1"></span></li>			<li><span class="img_2"></span></li>			<li><span class="img_3"></span></li>			<li><span class="img_4"></span></li>			<li><span class="img_5"></span></li>		</ul>		<a href="javascript:;" id="btn_prev"></a>		<a href="javascript:;" id="btn_next"></a>	</div>	<div class="img_font">		<span>img 1</span>		<span>img 2</span>		<span>img 3</span>		<span>img 4</span>		<span>img 5</span>	</div></div>
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);	});

也许你还喜欢