您现在的位置是:首页 > 学无止境> JS网站首页学无止境JS

jQuery手机移动端图片触屏滑动焦点图网页特效

jquery  
简介
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>jQuery手机移动端图片触屏滑动焦点图网页特效</title>
<link type="text/css" href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/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>
</head>
<body class="keBody">
<h1 class="keTitle">jQuery手机移动端图片触屏滑动焦点图网页特效</h1>
<div class="kePublic">
<!--效果html开始-->
<div class="main_visual">
<div class="flicking_con">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</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>
<!--效果html结束-->
<div class="clear"></div>
</div>
</body>
</html>

在线预览:jQuery手机移动端图片触屏滑动焦点图网页特效

点击下载:slide1.zip

Top