H5 轮播图[有箭头可控制方向]

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>

 

效果图:
H5 轮播图[有箭头可控制方向]_第1张图片
 

你可能感兴趣的:(html5,JQ轮播图,H5轮播图)