js实现文字、图片向上向左无缝滚动

<div id="colee" style="overflow:hidden;height:80px;">

    <div id="colee1">

           <li><a href="/">文字或图片实现向上无缝滚动</a></li>

           <li><a href="/">文字或图片实现向上无缝滚动</a></li>

           <li><a href="/">文字或图片实现向上无缝滚动</a></li>

           <li><a href="/">文字或图片实现向上无缝滚动</a></li>

           <li><a href="/">文字或图片实现向上无缝滚动</a></li>

           <li><a href="/">文字或图片实现向上无缝滚动</a></li>

    </div><div id="colee2"></div>     

</div>

<script>

var speedi=80;

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

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

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

colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

function Marquee1(){

//当滚动至colee1与colee2交界时

if(colee2.offsetTop-colee.scrollTop<=0){

colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

}else{

colee.scrollTop++

}

}

var MyMar1=setInterval(Marquee1,speedi)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

colee.onmouseover=function() {clearInterval(MyMar1)}

//鼠标移开时重设定时器

colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speedi)}

</script>

<!--下面是向左滚动代码-->

      <div id="colee_left" style="overflow:hidden;width:200px;">

        <table cellpadding="0" cellspacing="0" border="0">

          <tr>

            <td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0">

                <tr align="center">

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                  <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                </tr>

              </table></td>

            <td id="colee_left2" valign="top"></td>

          </tr>

        </table>

      </div>

      <script>

//使用div时，请保证colee_left2与colee_left1是在同一行上.

var speed=30//速度数值越大速度越慢

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

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

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

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度

colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度

else{

colee_left.scrollLeft++

}

}

var MyMar3=setInterval(Marquee3,speed)

colee_left.onmouseover=function() {clearInterval(MyMar3)}

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script> 

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