向左滚动 替代 Marquee

向左滚动

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

 

代码一. 使用DIV

Code

<!--//向左滚动代码开始-->

<style type="text/css">

body{margin:0px auto; padding:0px;}

ul,li{margin:0px; padding:0px;list-style:none;}



.sqBorder {602px; height:64px; padding:10px; border:1px #000000 solid; background:#555555;}

.scroll_div {600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}

.scroll_div img {120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}

#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/*设置ul和li横排*/

</style>

<script language="javascript">

function ScrollImgLeft(){

var speed=20

var scroll_begin = document.getElementById("scroll_begin");

var scroll_end = document.getElementById("scroll_end");

var scroll_div = document.getElementById("scroll_div");

scroll_end.innerHTML=scroll_begin.innerHTML

  function Marquee(){

    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)

      scroll_div.scrollLeft-=scroll_begin.offsetWidth

    else

      scroll_div.scrollLeft++

  }

var MyMar=setInterval(Marquee,speed)

  scroll_div.onmouseover=function() {clearInterval(MyMar)}

  scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

}

</script>

<h2 align="center">向左滚动</h2>

<div style="text-align:center">

  <div class="sqBorder">

  <!--#####滚动区域#####-->

    <div id="scroll_div" class="scroll_div">

      <div id="scroll_begin">

        <ul>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

          <li><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></li>

        </ul>

      </div>

      <div id="scroll_end"></div>

    </div>

  <!--#####滚动区域#####-->

  </div>

  <script type="text/javascript">ScrollImgLeft();</script>

</div>

<!--//向左滚动代码结束-->

代码二 使用Table

Code

<table width="760"  border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td align="center">

     

     <div id=demo style='overflow:hidden;height:110px;750px;'>

     <table height=110 border=0 cellspacing=0 cellpadding=0><tr valign=middle><td id=demo1><table width=780 border=0 



align=center cellpadding=0 cellspacing=0><tr><td class=imgbj>

     

     <a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" 



/></a></td>

     

     <td width=10></td><td class=imgbj><a href="http://www.Healthsys.cn/"><img 



src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></td>

     

     <td width=10></td><td class=imgbj><a href="http://www.Healthsys.cn/"><img 



src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></td>

     

     <td width=10></td><td class=imgbj><a href="http://www.Healthsys.cn/"><img 



src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></td><td width=10></td>

     

     <td class=imgbj><a href="http://www.Healthsys.cn/"><img src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" 



alt="Healthsys" /></a></td>

     

     <td width=10></td><td class=imgbj><a href="http://www.Healthsys.cn/"><img 



src="http://healthsys.com.cn/templets/img/df_dedetitle.gif" alt="Healthsys" /></a></td><td width=10></td>

     

     </tr></table>  </td><td id=demo2></td></tr></table>

     </div>

     

<script>

   var speed=30

   demo2.innerHTML=demo1.innerHTML

   function Marquee(){

   if(demo2.offsetWidth-demo.scrollLeft<=0)

   demo.scrollLeft-=demo1.offsetWidth

   else{

   demo.scrollLeft++

   }

   }

   var MyMar=setInterval(Marquee,speed)

   demo.onmouseover=function() {clearInterval(MyMar)}

   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

</td>

  </tr>

</table>