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和CSS3的帮助下，我们可以创建一个功能完善的轮播图，包括自动播放、箭头导航、指示器等功能。例如，使用JavaScript或者CSS3的定时器（`setInterval`）实现自动切换，通过伪类选择器（`:hover`、`:active`）和...
如果需要添加手动控制（如左右箭头），则可以监听点击事件，根据方向改变`currentIndex`，并调用`slideTo`。 CSS也是实现图片轮播的关键部分，用于设置图片的初始隐藏、过渡效果和活动图片的样式： ```css .slider...
3. JavaScript/jQuery控制：为了让用户能够通过点击或触摸事件控制图片的滑动，轮播特效通常会结合JavaScript或jQuery库来实现动态交互。例如，监听`click`事件，根据用户选择的方向更新图片索引，并应用CSS变换来...
8. 滚动方向判断：根据设计需求，轮播图可能支持正向和反向滚动，需要根据当前图片位置和目标位置来判断滚动方向。 9. 兼容性和优化：考虑到不同浏览器的兼容性问题，可能需要使用Modernizr等工具检测特性，或者...
2. **CSS样式**：CSS在轮播设计中扮演关键角色，用于控制元素的定位、大小、过渡效果以及隐藏和显示状态。例如，使用`position`属性实现元素的相对或绝对定位，使用`display`属性来切换元素的可见性，`transition`...
实现轮播图通常需要用到JavaScript来控制图片的切换，这包括设置定时器自动切换，添加导航点（小圆点）以显示当前选中的图片，以及处理左右箭头点击事件来手动切换图片。同时，考虑到移动端的触摸事件，可能还需要...
4. **大图幻灯**：大图幻灯是网页设计中常见的元素，用于展示高清大图，并通常带有自动轮播和导航箭头，增强用户视觉体验，吸引用户关注。 5. **产品报价单页**：这类页面通常用于详细介绍产品的特点、价格、规格等...
3. JavaScript：作为前端开发的核心技术之一，JavaScript用于实现动态交互效果和功能，如滑动菜单、轮播图、表单验证等。利用jQuery等库，可以简化JavaScript代码，提高效率。此外，随着ES6的引入，JavaScript的语法...
在这个集合中，JavaScript效果可能包括滑动、滚动、动画、表单验证、弹出窗口、时间日期显示、轮播图等常见功能。JavaScript也可以通过Ajax实现页面异步更新，提供更好的用户体验。另外，随着ES6（ECMAScript 2015）...
在这个模板中，幻灯大图可能是通过JavaScript库（如jQuery）和CSS动画实现的，使图片能够平滑过渡，同时可能还配备了自动轮播和手动导航箭头功能，以增强用户体验。 接下来是SPA美容会所的主题。SPA（源于拉丁语...
在这个模板中，JavaScript文件可能包含了各种功能模块，如导航菜单的交互、表单验证、滚动效果、轮播图等。利用jQuery或者其他JavaScript库，开发者可以更高效地编写代码，提升用户体验。此外，随着ES6的普及，模板...
在这个压缩包中，"移动端前端js效果"可能包括滑动导航、下拉菜单、触摸事件处理、滚动动画、模态框、轮播图等常见功能。JavaScript库如jQuery和现代框架如React、Vue或Angular可以简化这些功能的实现。通过AJAX，...
在这个模板中，可能包含了一些JavaScript库或框架，如jQuery，用于简化DOM操作，处理用户交互，如导航菜单的展开收起、轮播图切换等。同时，可能还利用了现代JavaScript特性，如ES6的箭头函数、模板字符串等，提高...
这里的“移动端前端js效果”可能包括下拉菜单、轮播图、滚动特效、表单验证等功能。随着ES6（ECMAScript 6）的引入，JavaScript提供了更多的语法糖和模块化方案，如let和const变量、箭头函数、类等，使得代码更加...
在这个压缩包中，可能包含各种JavaScript特效，如动画、滑块、下拉菜单、轮播图、表单验证等。这些特效可以通过库和框架实现，例如jQuery，它简化了DOM操作，使JavaScript代码更简洁。此外，现代JavaScript（ES6及...
在移动端前端js效果部分，这些JS文件可能包含了各种交互元素和动画效果，如滑动导航、轮播图、下拉菜单、表单验证等。JavaScript与HTML和CSS结合使用，可以创建丰富的用户界面和高度定制的功能。ES6（ECMAScript 6）...
UI组件是指可以重复使用的设计元素，如按钮、导航条、轮播图、表单输入等，它们是构建用户界面的关键。使用预封装的UI组件可以加快开发速度，保持设计一致性，并确保在不同设备上表现良好。在这个压缩包中，这些组件...
在这个集合中，JavaScript效果可能包括滑动菜单、轮播图、动画、表单验证、滚动效果等。JavaScript库或框架，如jQuery，可能被用来简化DOM操作和事件处理。另外，现代前端开发中，ES6（ECMAScript 6）的新特性，如...
5. UI组件：UI（用户界面）组件是指预构建的代码片段，如按钮、表单、导航栏、轮播图等，它们可以帮助开发者快速创建一致且美观的界面。这些组件通常包括HTML结构、CSS样式和必要的JavaScript逻辑，可以节省开发时间...