1、HTML
<!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" />
<title>jQuery.touchSlider触屏满屏左右滚动幻灯片</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.event.drag-1.5.min.js"></script>
<script src="js/jquery.touchSlider.js"></script>
<script>
$(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>
<div class="main_visual">
<div class="flicking_con">
<div class="flicking_inner">
<a href="javascript:">1</a>
<a href="javascript:">2</a>
<a href="javascript:">3</a>
<a href="javascript:">4</a>
<a href="javascript:">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>
2、CSS
@charset "utf-8";
*{margin:;padding:;list-style:none;border:;}
img{ border:none;}
.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:;
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('../images/img_main_1.jpg') center top no-repeat
}
.main_image li .img_2 {
background: url('../images/img_main_2.jpg') center top no-repeat
}
.main_image li .img_3 {
background: url('../images/img_main_3.jpg') center top no-repeat
}
.main_image li .img_4 {
background: url('../images/img_main_4.jpg') center top no-repeat
}
.main_image li .img_5 {
background: url('../images/img_main_5.jpg') 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:;
width:300px;
height:21px
} /* 121126 */
div.flicking_con a {
float:left;
width:21px;
height:21px;
margin:;
padding:;
background:url('../images/btn_main_img.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:;
position:absolute;
display:block;
width:73px!important;
height:74px!important;
top:50%;
margin-top:-37px;
display:none;
}
#btn_prev {
background:url(../images/hover_left.png) no-repeat left top;
left:100px;
}
#btn_next {
background:url(../images/hover_right.png) no-repeat right top;
right:100px;
}
3、js插件下载引入：
<script src="js/jquery.min.js"></script>
<script src="js/jquery.event.drag-1.5.min.js"></script>
<script src="js/jquery.touchSlider.js"></script>
运行结果：
