• 市人大常委会召开党组会议传达学习全国两会精神张轩主持并讲话 2019-03-23
  • NBL今日召开推广会 优胜队伍晋级CBA之门或将重启 2019-03-23
  • [微笑]原因很简单:房产的升值是由关联资源的增加形成的,跟房屋的产权人没有任何关系,肯定就不能让其从中获利! 2019-03-21
  • jQuery手机触屏滑动图片轮播效果代码_移动端图片拖拽切换插件touchSlider.js3336
     湖北省福彩30选5 www.jkyr.net 使用方法
    引用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);
    	});
    
        立即下载 ( 文件大?。?em>0.12 M)

      浏览器兼容性

      1. IE 8
      2. IE 9
      3. Mozilla Firefox
      4. Google Chrome
      5. Oper
      6. Safari

      技术讨论区

      1. 请先登录

          发 布

      键盘快捷键: 上一个 下一个

    • 市人大常委会召开党组会议传达学习全国两会精神张轩主持并讲话 2019-03-23
    • NBL今日召开推广会 优胜队伍晋级CBA之门或将重启 2019-03-23
    • [微笑]原因很简单:房产的升值是由关联资源的增加形成的,跟房屋的产权人没有任何关系,肯定就不能让其从中获利! 2019-03-21