[转]JS图片滚动效果

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 家园网 www.wfamilies.com </ title >
< style  type ="text/css" >
*{}{
margin:0;
padding:0;
}
body{}{
background:#CCC;
}
/**//*--大块定义--*/
#container{}{
text-align:left;
width:778px;
overflow:hidden;
background:#fff;
}
#content{}{
width:778px;
}
/**//*--休闲一刻--*/
#xxyk{}{
float:left;
width:778px;
margin:0;
padding:0;
background:#999;
}
#xxyk .content{}{
float:left;
width:778px;
margin:0;
padding:0 0 20px 0;
}
#xxyk .content img{}{
border:0;
}
#xxyk .content .roll{}{
width: 750px;
margin:4px auto;
padding:0 0 0 0; 
overflow:hidden;
}
#xxyk .content .roll #main{}{
list-style:none;
width:1620px;
padding:0;
margin:0;
}
#xxyk .content .roll #main #pic1,#xxyk .content .roll #main #pic2{}{
float:left;
text-align:left;
width:810px;
padding:0;
margin:0;
background:#f90;
}
#xxyk .content .roll #main #pic1 a,#xxyk .content .roll #main #pic2 a{}{
display:block;
text-align:center;
color:#FFFFFF;
width:135px;
}
#xxyk .content .roll #main #pic1 img,#xxyk .content .roll #main #pic2 img{}{
display:block;
clear:both;
width:115px;
height:111px;
margin:0 auto 5px auto;
padding:0;
}
#xxyk .content .roll #main #pic1 ul,#xxyk .content .roll #main #pic2 ul{}{
float:left;
list-style:none;
}
#xxyk .content .roll #main #pic1 ul li,#xxyk .content .roll #main #pic2 ul li{}{
float:left;
display:block;
margin:0;
padding:0;
}
/**//*--隐藏元素--*/
#slhdly .title,#xxyk .content ul li.more{}{
position:absolute;
visibility:hidden;
overflow:hidden;
display:none;
clip:rect(0,0,0,0);
height:0;
}
</ style >
</ head >
< body >
< div  id ="xxyk" >
< div  class ="content" >
< div  id ="pic"  class ="roll" >
< div  id ="main" >
< div  id ="pic1" >
< ul >
< li >< a  href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
< li >< a  href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
< li >< a  href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
< li >< a  href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
< li >< a  href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
< li >< a  href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
</ ul >
</ div >
< div  id ="pic2" >
</ div >
</ div >
</ div >
< script  type ="text/javascript" >
             var spe=22;  /**//*--控制移动速度--*/
                var m = document.getElementById("pic");
                var m1 = document.getElementById('pic1');
                var m2 = document.getElementById('pic2');
                m2.innerHTML = m1.innerHTML;
              function Marquee()
                 {
                  if(m2.offsetWidth-m.scrollLeft<=0)
                  {
                     m.scrollLeft-=m1.offsetWidth;
                  }
                  else
                  {
                   m.scrollLeft++;
               }
           }
                 var k1;
                 function startmarquee()
                 {
                     k1=setInterval(Marquee,spe)                 
                 }
                 window.setTimeout('startmarquee()',1000);
           m.onmouseover=function() {clearInterval(k1)}
           m.onmouseout=function() {k1=setInterval(Marquee,spe)}
                </ script >
</ div >
</ div >
</ body >
</ html >