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>
效果图：
相关推荐
html + css + js 图片轮播带左右箭头，图片内容不会被修剪，会呈现在元素框之外,轮播图下面的横线按钮
NULL 博文链接：https://onestopweb.iteye.com/blog/2378847
7款H5自适应广告轮播图代码免费下载，主要用于网站首页图文轮播风格的调用、广告图片代码图片超链接。适用于手机端、电脑端、平板等其他设备！ 代码特点： 采用HTML5响应式展示效果。 有其中6款自动轮播代码自动...
h5实现点击图片，放大当前点击图片并轮播点击元素的同级元素图片，点击图片，将此图片的所有同级图片追加至大图片盒子里，并控制大盒子显示和添加遮罩层，再次点击隐藏遮罩层和大图片盒子
移动端H5轮播图，可以手动、自动左右切换，无限循环，无缝轮播，可指定切换频率，自动切换方向。
H5+CSS3+移动端+文章内容页面+轮播图+响应式
完整的轮播图的代码片段，留有接口，只需要给出Size和Image的数组；接口处还可以定义PageControl的位置，轮播图图片的点击方法，还可以给每张图片添加自定义标题（标题添加在左下角）；{属 ： 转发整理内容}
h5使用，实现了简单的淘宝轮播，已经封装完成。
这是一个HTML+CSS+JavaScript的轮播图，资源改编于网络资源，侵删。
移动端轮播
漂亮的图片轮播效果（带暂停按钮控制），漂亮美观，很适合放在网站内展示图片
jquery 3D h5图片轮播效果
h5edu专题2.十款经典轮播图下载，更多专题下载关注h5edu.cn
基于vue实现移动端轮播图，主要功能手指触摸滑动滚动、自动轮播、无缝滚动、循环无回滚等。图片切换有过渡效果。适合前端初学者学习。欢迎有疑问的小伙伴私聊提问哦。
js文件实现图片轮播
使用Swiper 插件实现 类似于轮播图的视频轮播 轮播图
一个简单的HTML5页面，使用fullPage.js插件做的轮播图页面，可以直接放在Android项目中的 assets 文件夹下作为app欢迎页面来使用，结构简单，替换图片就可以放入你的项目中 另外，没有积分的同学 到...
中间图片放大，两边缩小，轮播效果，自己写的，没有其它的JS
包含了单张图片，多张图片的滑动效果，适用网页端，手机端，8种不同的模板，任你选择，因为用了h5的标签，所以浏览器的版本较低可能会有显示的问题，另外，图片并没有实现，循环播放的效果。 有哪位大神方便可以改...