兼容触屏手机浏览的jQuery(touchSlider插件)通栏焦点图代码

kevin-ying · 发表于 2015-9-24 17:59:38

[HTML] 纯文本查看 复制代码

<html xml:lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="Copyright" content="www.kevin-ying.com" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link href="http://www.kevin-ying.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>兼容触屏手机浏览的jQuery(touchSlider插件)通栏焦点图代码 | 源与生活 站长工具 by:文歌提供([url]www.kevin-ying.com[/url])</title>
<script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$(".main_visual").hover(function(){
		$("#btn_prev,#btn_next").fadeIn()
		},function(){
		$("#btn_prev,#btn_next").fadeOut()
		})
	$dragBln = false;
	$(".main_image").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".flicking_con a"),
		counter : function (e) {
			$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	$(".main_image").bind("mousedown", function() {
		$dragBln = false;
	})
	$(".main_image").bind("dragstart", function() {
		$dragBln = true;
	})
	$(".main_image a").click(function() {
		if($dragBln) {
			return false;
		}
	})
	timer = setInterval(function() { $("#btn_next").click();}, 5000);
	$(".main_visual").hover(function() {
		clearInterval(timer);
	}, function() {
		timer = setInterval(function() { $("#btn_next").click();}, 5000);
	})
	$(".main_image").bind("touchstart", function() {
		clearInterval(timer);
	}).bind("touchend", function() {
		timer = setInterval(function() { $("#btn_next").click();}, 5000);
	})
});
</script>
<style>
@charset "utf-8";
*{margin:0;padding:0;list-style:none;border:0;}
/* body */
body {margin:0; padding:0}
{width:100%; margin:0 auto; overflow:hidden}
.main_image {width:100%; height:422px; border-top:1px solid #d7d7d7; overflow:hidden; margin:0 auto; position:relative}
.main_image ul {width:9999px; height:422px; overflow:hidden; position:absolute; top:0; left:0}
.main_image li {float:left; width:100%; height:422px;}
.main_image li span {display:block; width:100%; height:422px}
.main_image li a {display:block; width:100%; height:422px}
.main_image li .img_1 {background: url('http://date.kevin-ying.com/bbs_up/album/201509/09/172936zbxk4txw47ptxwbb.png') center top no-repeat}
.main_image li .img_2 {background: url('http://date.kevin-ying.com/bbs_up/album/201509/09/172936zbxk4txw47ptxwbb.png') center top no-repeat}
.main_image li .img_3 {background: url('http://date.kevin-ying.com/bbs_up/album/201509/09/172936zbxk4txw47ptxwbb.png') center top no-repeat}
.main_image li .img_4 {background: url('http://date.kevin-ying.com/bbs_up/album/201509/09/172936zbxk4txw47ptxwbb.png') center top no-repeat}
.main_image li .img_5 {background: url('http://date.kevin-ying.com/bbs_up/album/201509/09/172936zbxk4txw47ptxwbb.png') center top no-repeat}
div.flicking_con {width:990px; margin:0 auto; position:relative}
div.flicking_con .flicking_inner {position:absolute; top:360px; left:90px; z-index:999; width:300px; height:21px} /* 121126 */
div.flicking_con a {float:left; width:21px; height:21px; margin:0; padding:0; background:url('http://date.kevin-ying.com/bbs_up/album/201509/24/153250qrhpjhpvrjp2vset.png') 0 0 no-repeat; display:block; text-indent:-1000px}
div.flicking_con a.on {background-position:0 -21px}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev{background:url('http://date.kevin-ying.com/bbs_up/album/201509/24/152943cdd8acdjmiikszja.png') no-repeat left top;left:100px;}
#btn_next{background:url('http://date.kevin-ying.com/bbs_up/album/201509/24/152943szq292unq7enahpa.png') no-repeat right top;right:100px;}
</style>
</head>
<body>
<div class="main_visual">
    <div class="flicking_con">
        <div class="flicking_inner"> <a href="http://www.kevin-ying.com">1</a> <a href="http://www.kevin-ying.com">2</a> <a href="http://www.kevin-ying.com">3</a> <a href="http://www.kevin-ying.com">4</a> <a href="http://www.kevin-ying.com">5</a> </div>
    </div>
    <div class="main_image">
        <ul>
            <li><span class="img_3"></span></li>
            <li><span class="img_4"></span></li>
            <li><span class="img_1"></span></li>
            <li><span class="img_2"></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>
</body>
</html>

		自动登录	找回密码
密码			免费注册

[Jquery] 兼容触屏手机浏览的jQuery(touchSlider插件)通栏焦点图代码

本帖被以下淘专辑推荐: