css
/* CSS Document */
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;padding:0;}
em{ font-style:normal}
ul{ list-style:none;}
img{ max-width:100%; max-height:100%; vertical-align: middle;}
i{ font-style:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
.wrapper{margin:0 auto;background-color:#F8F8F8;padding:1px 0;}
/*切换图*/
.section_bg01 { background-color:#a3a3a3;}
.main_visual{height:12em; overflow:hidden;position:relative;}
.main_image{height:12em;overflow:hidden;position:relative;}
.main_image ul{width:9999px;height:12em;overflow:hidden;position:absolute;top:0;left:0}
.main_image li{float:left;width:100%; height:12em;}
.main_image li span{display:block;width:75%;height:12em; margin:0 auto;}
.main_image li a{ display:block; width:100%;height:12em;}
.main_image li .img_1{ background:url(../images/img01.jpg) center top no-repeat; background-size:100%;}
.main_image li .img_2{ background:url(../images/img02.jpg) center top no-repeat; background-size:100%;}
.main_image li .img_3{ background:url(../images/img03.jpg) center top no-repeat; background-size:100%;}
.main_image li .img_4{ background:url(../images/img04.jpg) center top no-repeat; background-size:100%;}
div.flicking_con{position:absolute;bottom:.5em;left:50%;z-index:999;width:100%;height:1em;margin:0 auto;}
div.flicking_con a{float:left;width:21px;height:21px;margin:0;padding:0; background:url(../images/ppt_btn.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:1em!important;height:1.8em!important;top:50%;margin-top:-.65em;}
#btn_prev{ background:url(../images/hover_left.png) no-repeat left top;left:1em; background-size:100%;}
#btn_next{ background:url(../images/hover_right.png); no-repeat right top;right:1em; background-size:100%;}
/*响应式*/
@media only screen and (min-width: 1280px){
body{font-size:24px;}
.wrapper{width:640px;}
.newWrap{ width:1280px;}
.nav{ width:1280px;}
}
@media only screen and (min-width: 640px) and (max-width: 1279px){
body{font-size:24px;}
.wrapper{width:640px;}
.newWrap{ width:640px;}
.nav{ width:640px;}
}
@media only screen and (min-width: 480px) and (max-width: 639px){
body{font-size:18px;}
.wrapper{width:100%;}
.newWrap{ width:100%;}
.r-bd{-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.nav{ width:100%;}
.bookingBox select { padding:1px 0;}
}
@media only screen and (min-width: 360px) and (max-width: 479px){
body{font-size:13px;}
.wrapper{width:100%;}
.newWrap{ width:100%;}
.nav{ width:100%;}
.r-bd{-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}
.selkeshi_v2014 { padding:2px 0 2em 0;}
.f12bla_footer2014 .firstNd p { font:13px/24px "";}
.font-20px { font-size:1em;}
.bookingBox select { padding:1px 0;}
}
@media only screen and (max-width: 360px){
body{font-size:12px;}
.wrapper{width:100%;}
.newWrap{ width:100%;}
.nav{ width:100%;}
.r-bd{-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.entry_list_v2014 { height:3em;}
.entry_list_v2014 ul li { font:1.2em/2.5em "Microsoft YaHei";}
.selkeshi_v2014 { padding:2px 0 2em 0;}
.f12bla_footer2014 .firstNd p { font:13px/24px "";}
.font-20px,.font-18px { font-size:1em;}
.bookingBox select { padding:0;}
}
@media only screen and (max-width: 360px){
.center-btn7 li{width:19.5%;}
.center-btn8 li{width:24.5%;}
}
?
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5 切换图</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<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">
<link href="style/touch.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrapper wrapper_bgW">
<section class="section_bg01 clearfix"> <span class="blank20"></span>
<div class="main_visual">
<div class="flicking_con" style="display:none;"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div>
<div class="main_image">
<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>
</ul>
<a href="javascript:;" id="btn_prev"></a> <a href="javascript:;" id="btn_next"></a> </div>
</div>
<span class="blank20"></span>
</section>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.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>
</body>
</html>
?
效果图：
?
原文：http://onestopweb.iteye.com/blog/2265380