前一篇博文将图片向上滚动代码的进行了详细解释，这次再介绍一下图片向左边滚动代码。因为是水平布局，如果使用DIV会有点麻烦，所以使用了DIV结合Table进行布局。外层是一个ID为“demo”的Div，内部放置了一个一行二列的表格，两个TD的ID分别是“demo1、demo2”。在ID为“demo1”的再放置一个表格，这个表格放滚动的图片，几张图片就是几列。基本原理与向上滚动类似，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo的scrollLeft达到滚动的目的，当demo1与demo2的交界处滚动至demo顶端时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

    文中offsetLeft、scrollLeft、offsetWidth含义如下：

     offsetLeft：当前对象到其上级层左部的距离。

     scrollLeft：对象左端滚动出显示范围距离的值。

     offsetWidth：当前对象的宽度值。

代码如下(新浪博客会屏蔽html、js代码，请自行替换"<"、">")：

<~DIV id="demo" style="BACKGROUND: #214984; OVERFLOW: hidden; WIDTH: 800px; COLOR: #ffffff; HEIGHT: 168px"~> <~!--demo的宽度建议等于demo1。--~> 
       <~table border="0" width="100%" id="table1"~> 
        <~tr~> 
         
         <~td id="demo1"~> 
             <~table border="0" width="100%" id="table2"~> 
             <~tr~> 
               <~td~><~IMG height=157 src="F200602161743593194929892.jpg" width=152~><~/td~> 
               <~td~><~IMG height=156 src="images/NewsMedia_176140.jpg" width=154~><~/td~> 
               <~td~><~IMG height=157 src="images/P922118900.jpg" width=155 border=0~><~/td~> 
               <~td~><~IMG height=156 src="images/P922118900.jpg" width=155 border=0~><~/td~> 
               <~td~><~IMG height=157 src="images/0038.jpg" width=158~><~/td~> 
              <~/tr~> 
            <~/table~> 
         <~/td~> 
         <~td id="demo2"~>　<~/td~> 
       <~/tr~> 
    <~/table~> <~/DIV~> 
     <~script type="text/javascript"~> 
     var demo=document.getElementById("demo"); 
     var demo1=document.getElementById("demo1"); 
     var demo2=document.getElementById("demo2"); 
     var speed=30 //图片滚动速度 
     demo2.innerHTML=demo1.innerHTML; //克隆demo1为demo2 
    //alert(demo2.offsetWidth); //调试用，查看demo1的宽度 
    function Marquee(){ 
         if(demo1.offsetWidth-demo.scrollLeft<</span>=0) //当demo1与demo2的交界处滚动至demo左端时 
              demo.scrollLeft-=demo1.offsetWidth; //demo跳回到原始顶端位置 
         // if(demo.scrollLeft~>=demo1.offsetWidth) //另一种算法 
        // demo.scrollLeft=0; 
       else{ 
            demo.scrollLeft++; //demo向左滚动一个像素 
          } 
         
        } 
     var MyMar=setInterval(Marquee,speed); //设置定时器 
    demo.onmouseover=function() {clearInterval(MyMar)}; //鼠标移上时清除定时器达到滚动停止的目的 
     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
    <~/SCRIPT~>