JS滑动门,JQuery滑动门

   <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="hover">专家汇聚</a>
   <a href="#"  id="one2" onmouseover="setTab('one',2,2)" >主治医师</a>

 <div id="con_one_1" >
 <a href="#"  target="_blank" class="sub2_more">更多</a>
<div class="sub2_con1">
                    
     00
 
</div>
</div>
 <div id="con_one_2"   style="display:none">
 <a href="#"  target="_blank" class="sub2_more">更多</a>
<div class="sub2_con1">
     555
 
</div>

 </div>

//tab切换
function setTab(name, cursel, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getElementById(name + i);
        var con = document.getElementById("con_" + name + "_" + i);
        menu.className = i == cursel ? "hover" : "";
        con.style.display = i == cursel ? "block" : "none";

    }
}

.sub2_more
{
    display:block; 
    float:right;    
    text-align:center; 
    position:relative;
    color:#00968b;
    margin-top:-48px;
    text-decoration:none;
    font-size:12px;
    margin-right:20px;
 } 

.sub2_more:hover{color:#00c1b3}

 

解释：setTab('one',1,2) 与IDcon_one_2相关联，参数中的2表示总的滑动门总数

 

 

---------------------------------------------------------------------------------

结构：注意ID

<div class="FZ_Tab_Title txt_C">
<a href=""   class="hover">仿真恐龙</a><a href="">仿真骨架</a><a href="">互动娱乐</a><a href="">机械怪兽</a>
</div>

<div class="Marquee"  >
  <div  class="Marquee_1" id="Marquee_1">
        <ul id="Marquee_1_ul">
            <li> <a href="" target="_blank"><img src="../images/03.jpg"  width=286px height=215/><span>恐龙霸王龙11</span></a></li>
            <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙11</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/03.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/03.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
        
        </ul>
    </div>
 
  <div  class="Marquee_2" id="Marquee_2">
        <ul id="Marquee_2_ul">
         <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙22</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙22</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
         <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
        </ul>
    </div>
 
  <div  class="Marquee_3" id="Marquee_3">
        <ul id="Marquee_3_ul">
        <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙33</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙33</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
         <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
        </ul>
    </div>

  <div  class="Marquee_4" id="Marquee_4">
        <ul id="Marquee_4_ul">
               <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙44</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙44</span></a></li>
          <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
         <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
        
        </ul>
    </div>
 </div>

<script>
//切换的关键代码

     $(".FZ_Tab_Title a").eq(0).addClass("hover");
     $(".Marquee div").eq(0).show();
     $(".FZ_Tab_Title a").hover(function () {
         $(this).addClass("hover").siblings("a").removeClass("hover");
         $(".Marquee div:eq(" + $(this).index() + ")").show().siblings("div").hide();
  });

　　new Marquee(["Marquee_1", "Marquee_1_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动
    new Marquee(["Marquee_2", "Marquee_2_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动
    new Marquee(["Marquee_3", "Marquee_3_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动
    new Marquee(["Marquee_4", "Marquee_4_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动

/*样式代码用于滚动，不用于切换*/
.Marquee{padding-top:60px;height:250px;overflow:hidden}
.Marquee ul li ,.Marquee ul li div{ float:left;line-height:25px;overflow:hidden} 
.Marquee ul li { float:left;line-height:25px;height:250px; width:300px; overflow:hidden}
.Marquee ul li a img{  width:286px; height:215px; display:inline-block}
.Marquee ul li a span{ display:inline-block;text-align:center;width:286px;color:#fff}
.Marquee ul li a:hover span{color:#da000f}
.Marquee ul li a:hover img{border:1px solid #5b2900}