手机移动端左右滚动特效

最新推荐文章于 2023-05-21 15:15:22 发布

xiaoshan0711

最新推荐文章于 2023-05-21 15:15:22 发布

阅读量2.2k

点赞数

分类专栏：滚动特效

滚动特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

<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>

</body>
</html>

xiaoshan0711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
手机移动端左右滚动特效

jQuery手机移动端图片触屏滑动焦点图网页特效$(document).ready(function(){$(".main_visual").hover(function(){$("#btn_prev,#btn_next").fadeIn()},function(){$("#btn_prev,#btn_next").fadeOut()});
复制链接

扫一扫