急！求图片上下首尾相接移动

<script type="text/javascript">
   (function(){  var str=window.location.href;    var pid= str.match(/pid=mm_\d{0,10}_\d{0,10}_\d{0,10}/i);    if(pid){      pid = pid[0].split("=")[1]
      var reg=new RegExp("pid=mm_0_0_0","gmi");
      var as   =   document.getElementsByTagName("A");
      for(var   i   =   0;   i <   as.length;   i   ++){
        as[i].href=as[i].href.replace(reg,"pid="+pid);
      }
      document.getElementById("scroll_div_img").innerHTML =
document.getElementById("scroll_div_img").innerHTML.replace(/pid=mm_0_0_0/ig,"pid="+pid)    }})()
                    </script>                    <script type="text/javascript">
function $i(id){return document.getElementById(id);}
// 横着滚动
function simpleSideScroll(c,ul,config,direction){
    this.config = config ? config : {start_delay:3000, speed: 23, delay:4000, scrollItemCount:1};
this.c = $i(c);
this.ul = $i(ul);
this.direction = direction ? direction : "left";
this.pause = false;
this.buttonlist= new Object();
this.delayTimeId=null;

var _this = this; this.c.onmouseover=function(){_this.pause = true;}
this.c.onmouseout=function(){_this.pause = false;}

this.init = function() {
_this.scrollTimeId = null;
setTimeout(_this.start,_this.config.start_delay);
}

this.start = function() {
var d = _this.c;
var width = d.getElementsByTagName('li')[0].offsetWidth;
if(d.scrollWidth-d.offsetLeft>=width) _this.scrollTimeId = setInterval(_this.scroll,_this.config.speed)
};

this.scroll = function() {
if(_this.pause)return;
var ul= _this.ul;
var d = _this.c;
var width = d.getElementsByTagName('li')[0].offsetWidth;
if(_this.direction == 'left'){
        d.scrollLeft += 2;
        if(d.scrollLeft%(width*_this.config.scrollItemCount)<=1){
        if(_this.config.movecount != undefined)
        for(var i=0;i<_this.config.movecount;i++){ul.appendChild(ul.getElementsByTagName('li')[0]);}
        else for(var i=0;i<_this.config.scrollItemCount;i++){ul.appendChild(ul.getElementsByTagName('li')[0]);}
        d.scrollLeft=0;
        clearInterval(_this.scrollTimeId);

        _this.delayTimeId=setTimeout(_this.start,_this.config.delay);
        }
}
else {
    if(d.scrollLeft==0)
    {
        var lis=ul.getElementsByTagName('li');
        for(var i=0;i<_this.config.scrollItemCount;i++){
            ul.insertBefore(lis[lis.length-1],lis[0]);
        }
        d.scrollLeft = width;
    }
    d.scrollLeft -= 2;
    if(d.scrollLeft%(width*_this.config.scrollItemCount)<=1){
        d.scrollLeft=0;
        clearInterval(_this.scrollTimeId);
        _this.delayTimeId=setTimeout(_this.start,_this.config.delay);
    }
}
}

this.setButton=function(id,direction){
    if($i(id)){
        var c=$i(id);
        var buttonlist =_this.buttonlist;
        if(buttonlist[id] == undefined){
            buttonlist[id] =new Object();
            _this.buttonlist[id][0]=c;
            _this.buttonlist[id][1]=direction;

            c.onclick=function(){
                 clearInterval(_this.scrollTimeId);

                var dir=_this.buttonlist[this.id][1];
                var d = _this.c;
                var ul= _this.ul;
                d.scrollLeft=0;
                if(dir =="left")
                {
                    for(var i=0;i<_this.config.scrollItemCount;i++){ul.appendChild(ul.getElementsByTagName('li')[0]);}
                }
                else{
                    var lis=ul.getElementsByTagName('li');
                for(var i=0;i<_this.config.scrollItemCount;i++){
                    ul.insertBefore(lis[lis.length-1],lis[0]);
                }
                }

                _this.direction= dir;
                clearTimeout(_this.delayTimeId);
                _this.delayTimeId=setTimeout(_this.start,_this.config.delay);
                return false;
            }
        }
    }
}
}var cooperater_run;
function init_load(){
var ul=$i('scroll_div_img_ul');
  var lis=window.document.getElementsByTagName("li");
   if(lis.length >9)
   {
    if($i('scroll_div_img')){
   cooperater_run=new simpleSideScroll('scroll_div_img','scroll_div_img_ul',{start_delay:0, speed:30, delay:0, scrollItemCount:1},'left')
    cooperater_run.init();
}
   }
}
function ScrollDivLeft()
{
if(cooperater_run !=null )
{
  cooperater_run.direction="left";
  }
}
function ScrollDivRight()
{ if(cooperater_run !=null )
{
  cooperater_run.direction="right";
  }
}
if(window.attachEvent){
    window.attachEvent("onload",init_load);
     var obj=$i('left');
    obj.attachEvent("onclick",ScrollDivLeft);
    obj=$i('right');
    obj.attachEvent("onclick",ScrollDivRight);
}else if(window.addEventListener){
    window.addEventListener("load",init_load,false);
       var obj=$i('left');
    obj.addEventListener("click",ScrollDivLeft,false);
    obj=$i('right');
    obj.addEventListener("click",ScrollDivRight,false);
}
                    </script>
自己参照下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>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p> //放入你自己的图片地址
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/20007/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200107/bg3.jpg"></p>
<p><img src="/jscss/demoimg/2000107/bg3.jpg"></p>
<p><img src="/jscss/demoimg/2001007/bg3.jpg"></p>
<p><img src="/jscss/demoimg/2001007/bg3.jpg"></p>
<p><img src="/jscss/demoimg/201007/bg3.jpg"></p>
<p><img src="/jscss/demoimg/201007/bg3.jpg"></p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed=30;
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,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script><br><div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
<div id="colee_bottom1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed=30
var colee_bottom2=document.getElementById("colee_bottom2");
var colee_bottom1=document.getElementById("colee_bottom1");
var colee_bottom=document.getElementById("colee_bottom");
colee_bottom2.innerHTML=colee_bottom1.innerHTML
colee_bottom.scrollTop=colee_bottom.scrollHeight
function Marquee2(){
if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
colee_bottom.scrollTop+=colee_bottom2.offsetHeight
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script><br><div id="colee_left" style="overflow:hidden;width:500px;">
<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><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></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><br><div id="colee_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML
function Marquee4(){
if(colee_right.scrollLeft<=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_right.onmouseover=function() {clearInterval(MyMar4)}
colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
</body>
</html>
就是图片向上或者向下移动循环显示（首尾相接）
目前代码：
<DIV align="center" style="height:100%;">
<MARQUEE scrollAmount=1 direction=down width=150px height=1200px onMouseOver="this.stop()" onMouseOut="this.start()" align="top">

<img src="UploadFile/2008_10_15_46238_223930.jpg" alt="婚庆礼仪" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_14_63408_215644.jpg" alt="中国电信日" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_12_71053_221533.jpg" alt="女子组合" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_12_27548_22548.jpg" alt="爵士" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_12_65355_213959.jpg" alt="牵手观音" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_12_12736_213128.jpg" alt="乐队" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_12_94274_21136.jpg" alt="拉丁" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223931.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223932.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223933.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223934.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223935.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223936.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223937.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223938.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223939.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223940.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223941.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223942.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223943.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223944.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223945.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223946.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223947.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223948.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223949.jpg" alt="活动" width="150" height="113"
border="0">
<img src="UploadFile/2008_10_15_46238_223950.jpg" alt="活动" width="150" height="113"
border="0">
</MARQUEE>
</DIV>

调试易

急！求图片上下首尾相接移动

解决方案 »

急！ 求图片上下首尾相接移动

解决方案 »

急！求图片上下首尾相接移动