jquery水平滑动图片切换特效

分享到：

来源：未知浏览：次发布时间：2014-05-29 17:08

鼠标滑动图片切换的jquery特效,图片的数目根据自己的来修改。图片切换水平效果

jquery水平滑动图片切换特效

<!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>

<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>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。