使用方法引用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); });
