jquery水平滑动图片切换特效
2014-05-31 09:24
417 查看
jquery水平滑动图片切换特效:下面是代码 直接保存html就可以运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js水平滑动图片切换特效-51模板集</title>
<script type="text/javascript" src="js/jQuery.js"></script>
<script>
var timeout2=5000; //切换时间
var timeout3=10000; //mouse over 后切换时间
var now_content=0;
var total_content=3;
var way=1;
var start_content=Math.round(Math.random()*(total_content-1))+1; //除广告为第一显示外
function content_mouse(num){
now_content=num;
window.clearInterval(theTimer2);
for (var i=1;i<=total_content;i++){
document.getElementById('divhl0'+i).style.display='none';
}
document.getElementById('divhl0'+num).style.display='block';
theTimer2=setTimeout('change_content()', timeout3);
}
function change_content(){
for (var i=1;i<=total_content;i++){
document.getElementById('divhl0'+i).style.display='none';
}
document.getElementById('divhl0'+now_content).style.display='block';
if (way) now_content++;
else now_content--;
if(now_content>total_content) {now_content=total_content-1;way=0;}
else if(now_content==0) {now_content=1;way=1;}
theTimer2=setTimeout('change_content()', timeout2);
}
theTimer2=setTimeout(function(){now_content=1;change_content();}, timeout2);
</script>
<style>
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; margin: 0; padding: 0; }
img { border: 0 none; vertical-align: top; }
ul, li { list-style-type: none; }
h2{font-size:14px;}
.nry .nry11{
width:100%;
height:336px;
background-color:#FFFFFF;
padding-top:25px;
padding-bottom:38px;
margin-bottom:38px;
}
.nry11 .nry11_in{
margin: 0 auto;
height:298px;
width: 998px;
border:1px solid #dadada;
}
.cls_border1 {height:296px; width: 998px; overflow: hidden; text-align: left; margin-left:auto; margin-right:auto;}
.cls_border1 ul li { float: left;}
.pdboder { text-align: left; width:62px; overflow: hidden; height:287px; padding-top:4px; text-align:center;}
.gd { padding-left: 0px; width: 62px; overflow: hidden; }
.yclm_1 li { height: 25px; }
.show{ width:805px; height:281px; line-height:23px; color:#848484; padding-left:4px; padding-top:5px;}
.show .tu{
float:left;
width:481px; height:287px;
}
.show .word{ float:left; width:320px; height:287px; padding-left:8px;}
.word .mn1{
float:left;
padding-top:40px;
width:300px;
color:#8d7455;
font-size:14px;
font-weight:bold;
margin-left:15px;
}
.word p{
text-indent:2em;
width:266px;
line-height:25px;
margin-left:15px;
font-size:14px;
}
.word .nn2{
float:left;
width:280px;
margin-left:15px;
margin-top:10px;
}
.nn2 span{
color:#FF0000;
font-size:14px;
line-height:30px;
}
</style>
</head>
<body>
<div class="nry11">
<div class="nry11_in">
<div class="cls_border1">
<ul>
<li onmouseover="content_mouse(1)" class="pdboder"><a href="javascript:;" target="_top"><img src="/images/d_45.jpg" border="0"></a></li>
<li class="show" style="display: block; " id="divhl01">
<div class="tu"> <img src="/images/d_48.jpg"></div>
<div class="word">
<span class="mn1">全新的台湾妇产理念</span>
<p>安徽安琪儿妇产医院与台湾秀传医院强强联合，遵循“预防+治疗”相结合的台湾盆底康复理念，将产前盆底预防保健和产后修复治疗相结合，减免怀孕和分娩造成的盆底损伤。</p>
<div class="nn2"><span>专业看不懂？</span><a href="/"><img src="/images/d_51.jpg" /></a> </div>
</div>
</li>
<li onmouseover="content_mouse(2)" class="pdboder"><a href="javascript:;" target="_top"><img src="/images/d_46.jpg" border="0"></a></li>
<li class="show" id="divhl02" style="display: none; ">
<div class="tu"> <img src="/images/d_48.jpg"></div>
<div class="word"><span class="mn1">三甲医院妇产专家指导</span>
<p>安徽安琪儿妇产医院各科室主任及学科带头人均由省立人民医院、省妇幼保健院、安徽省医科大学附属医院等三甲医院妇产科专家担任。</p>
<div class="nn2"><span>专业看不懂？</span><a href="/"><img src="/images/d_51.jpg" /></a> </div>
</div>
</li>
<li onmouseover="content_mouse(3)" class="pdboder"><a href="javascript:;" target="_top"><img src="/images/d_47.jpg" border="0"></a></li>
<li class="show" id="divhl03" style="display: none; ">
<div class="tu"> <img src="/images/d_48.jpg"></div>
<div class="word"><span class="mn1">专业治疗仪器轻松修复受损盆底</span>
<p>法国PHENIX盆底功能康复仪利用生物工程技术、生物信息原理，针对不同病人采用不同频率、不同脉宽、不同强度的电刺激、不同效果的生物反馈模式，结合独有的A3反射、场景反射的训练，唤醒被损伤的盆底肌肉，增加盆底肌肉的肌力和弹性，无创无痛增加阴道的紧缩度，提高性生活的质量，同时有利于预防、治疗盆底障碍性疾病如尿失禁等的发生。</p></div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
本文来自: 51模板集(www.51mubanji.com)
详细出处参考：http://www.51mubanji.com/wytx/jquerytx/413.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js水平滑动图片切换特效-51模板集</title>
<script type="text/javascript" src="js/jQuery.js"></script>
<script>
var timeout2=5000; //切换时间
var timeout3=10000; //mouse over 后切换时间
var now_content=0;
var total_content=3;
var way=1;
var start_content=Math.round(Math.random()*(total_content-1))+1; //除广告为第一显示外
function content_mouse(num){
now_content=num;
window.clearInterval(theTimer2);
for (var i=1;i<=total_content;i++){
document.getElementById('divhl0'+i).style.display='none';
}
document.getElementById('divhl0'+num).style.display='block';
theTimer2=setTimeout('change_content()', timeout3);
}
function change_content(){
for (var i=1;i<=total_content;i++){
document.getElementById('divhl0'+i).style.display='none';
}
document.getElementById('divhl0'+now_content).style.display='block';
if (way) now_content++;
else now_content--;
if(now_content>total_content) {now_content=total_content-1;way=0;}
else if(now_content==0) {now_content=1;way=1;}
theTimer2=setTimeout('change_content()', timeout2);
}
theTimer2=setTimeout(function(){now_content=1;change_content();}, timeout2);
</script>
<style>
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; margin: 0; padding: 0; }
img { border: 0 none; vertical-align: top; }
ul, li { list-style-type: none; }
h2{font-size:14px;}
.nry .nry11{
width:100%;
height:336px;
background-color:#FFFFFF;
padding-top:25px;
padding-bottom:38px;
margin-bottom:38px;
}
.nry11 .nry11_in{
margin: 0 auto;
height:298px;
width: 998px;
border:1px solid #dadada;
}
.cls_border1 {height:296px; width: 998px; overflow: hidden; text-align: left; margin-left:auto; margin-right:auto;}
.cls_border1 ul li { float: left;}
.pdboder { text-align: left; width:62px; overflow: hidden; height:287px; padding-top:4px; text-align:center;}
.gd { padding-left: 0px; width: 62px; overflow: hidden; }
.yclm_1 li { height: 25px; }
.show{ width:805px; height:281px; line-height:23px; color:#848484; padding-left:4px; padding-top:5px;}
.show .tu{
float:left;
width:481px; height:287px;
}
.show .word{ float:left; width:320px; height:287px; padding-left:8px;}
.word .mn1{
float:left;
padding-top:40px;
width:300px;
color:#8d7455;
font-size:14px;
font-weight:bold;
margin-left:15px;
}
.word p{
text-indent:2em;
width:266px;
line-height:25px;
margin-left:15px;
font-size:14px;
}
.word .nn2{
float:left;
width:280px;
margin-left:15px;
margin-top:10px;
}
.nn2 span{
color:#FF0000;
font-size:14px;
line-height:30px;
}
</style>
</head>
<body>
<div class="nry11">
<div class="nry11_in">
<div class="cls_border1">
<ul>
<li onmouseover="content_mouse(1)" class="pdboder"><a href="javascript:;" target="_top"><img src="/images/d_45.jpg" border="0"></a></li>
<li class="show" style="display: block; " id="divhl01">
<div class="tu"> <img src="/images/d_48.jpg"></div>
<div class="word">
<span class="mn1">全新的台湾妇产理念</span>
<p>安徽安琪儿妇产医院与台湾秀传医院强强联合，遵循“预防+治疗”相结合的台湾盆底康复理念，将产前盆底预防保健和产后修复治疗相结合，减免怀孕和分娩造成的盆底损伤。</p>
<div class="nn2"><span>专业看不懂？</span><a href="/"><img src="/images/d_51.jpg" /></a> </div>
</div>
</li>
<li onmouseover="content_mouse(2)" class="pdboder"><a href="javascript:;" target="_top"><img src="/images/d_46.jpg" border="0"></a></li>
<li class="show" id="divhl02" style="display: none; ">
<div class="tu"> <img src="/images/d_48.jpg"></div>
<div class="word"><span class="mn1">三甲医院妇产专家指导</span>
<p>安徽安琪儿妇产医院各科室主任及学科带头人均由省立人民医院、省妇幼保健院、安徽省医科大学附属医院等三甲医院妇产科专家担任。</p>
<div class="nn2"><span>专业看不懂？</span><a href="/"><img src="/images/d_51.jpg" /></a> </div>
</div>
</li>
<li onmouseover="content_mouse(3)" class="pdboder"><a href="javascript:;" target="_top"><img src="/images/d_47.jpg" border="0"></a></li>
<li class="show" id="divhl03" style="display: none; ">
<div class="tu"> <img src="/images/d_48.jpg"></div>
<div class="word"><span class="mn1">专业治疗仪器轻松修复受损盆底</span>
<p>法国PHENIX盆底功能康复仪利用生物工程技术、生物信息原理，针对不同病人采用不同频率、不同脉宽、不同强度的电刺激、不同效果的生物反馈模式，结合独有的A3反射、场景反射的训练，唤醒被损伤的盆底肌肉，增加盆底肌肉的肌力和弹性，无创无痛增加阴道的紧缩度，提高性生活的质量，同时有利于预防、治疗盆底障碍性疾病如尿失禁等的发生。</p></div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
本文来自: 51模板集(www.51mubanji.com)
详细出处参考：http://www.51mubanji.com/wytx/jquerytx/413.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery焦点图片左右滑动切换特效代码
- JQuery实现简单的图片滑动切换特效
- JQuery实现简单的图片滑动切换特效
- 基于jQuery图片遮罩滑动文字切换特效
- jQuery插件打造10多款具有超强的视觉冲击的图片切换特效
- 完美兼容各大浏览器的jQuery插件实现图片切换特效
- Flexslider图片轮播、文字图片相结合滑动切换效果HTML 首先在页面head部位载入jquery库文件和Flexslider插件，以及Flexslider所需的基本css样式文件。
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果
- 一款基于jQuery制作的焦点图片局部场景图片切换的特效
- 基于jQuery左右滑动切换特效
- 基于jQuery左右滑动切换图片代码
- jQuery旋转木马仿3D效果的图片切换特效代码
- 完美兼容各大浏览器的jQuery插件实现图片切换特效
- -jQuery图片九宫格样式鼠标悬停图片滑动切换效果
- jQuery手机触屏左右滑动切换焦点图特效代码
- jquery lavaLamp背景滑动，内容缓慢滑动动画特效，图片缓慢缩放
- jquery全屏图片滑动特效插件cbpFWSlider
- wap手机图片滑动切换特效无css3元素js脚本编写
- 一款基于jQuery的图片水平滑动插件
- jquery 实现横向滑动自动切换源码（同时显示多张图片）