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}