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文件实现图片轮播
该资源是SenchaTouch框架开发的移动端html5图片轮播缩放插件,功能包括手指滑动图片轮播,图片缩放
使用Swiper 插件实现 类似于轮播图的视频轮播 轮播图
一个简单的HTML5页面,使用fullPage.js插件做的轮播图页面,可以直接放在Android项目中的 assets 文件夹下作为app欢迎页面来使用,结构简单,替换图片就可以放入你的项目中 另外,没有积分的同学 到...
中间图片放大,两边缩小,轮播效果,自己写的,没有其它的JS