Javascript图像滚动条,如何保持滚动而不重新启动?

时间:2011-04-27 20:02:23

标签: javascript html

我有这个脚本,从底部到顶部垂直滚动图像,除了一件事,它的效果还不错。我希望这个滚动是无限的,而不是每次帧都为空时重新启动。换句话说,我不希望它在任何时候都是空的。

你们认为这是可能的吗?这是代码(我知道脚本非常糟糕,但我已经尝试了很多,这只是一个为我做的技巧):

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" onMouseover="scrollspeed=(current/2)" onMouseout="scrollspeed=current" OnLoad="NewsScrollStart();">

<div id="NewsDiv">
<table cellpadding="5" cellspacing="0" border="0" width="200" align="center"><tr><td>
    <p>
    <!-- CLIENTS IMAGES--><img src="images/clients/tango.jpg" "width="100" height="37" align="middle" border="0"></p>
    <p><br>
      <br>

      <a target="newwindow" href="http://www.adbid.se" onClick="popup"><img src="images/clients/adbid_clients.png" border="0" align="middle"></a></p>
    <p>&nbsp;</p>
    <p><a target="newwindow" href="http://www.sanomadigital.nl"><img src="images/clients/logo_sanoma_digital.png" border="0" align="middle"></a></p>
    <p><a target="newwindow" href="http://www.sanomadigital.nl"><br />
      </a>

      <a target="newwindow" href="http://www.prisabs.com"><img src="images/clients/logo-prisa-bs-home.jpg" border="0" align="middle"></a></p>
    <p><a target="newwindow" href="http://www.prisabs.com"><br />
      </a>

    <a target="newwindow" href="http://www.sanoma.fi"><img src="images/clients/sanoma_logo.gif" border="0" align="middle"></a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
     <table width="101" border="0">
      <tr>
        <td width="112" align="center"><img src="images/clients/echo.jpg" border="0" width="91" height="41"></td>
      </tr>
    </table>
    <p><br>
      <br>

      <a target="newwindow" href="http://www.familjeapoteket.se"><img src="images/clients/familjeapoteket_clients.jpg" border="0" align="middle"></a></p>
    <p><br />

      <a target="newwindow" href="http://www.hertz.se"><img src="images/clients/hertz_clients.jpg" border="0" align="middle"></a></p>
    <p><a target="newwindow" href="http://www.hertz.se"><br />
      </a>

      <a target="newwindow" href="http://www.gemoney.no"><img src="images/clients/gemoney_clients.jpg" border="0" align="middle"></a></p>
    <p><a target="newwindow" href="http://www.gemoney.no"><br />
      </a>

      <a target="newwindow" href="http://www.vikingline.se"><img src="images/clients/vikingline_clients.jpg" border="0" align="middle"></a></p>
    <p><a target="newwindow" href="http://www.vikingline.se"><br />
      </a>

      <a target="newwindow" href="http://www.ebookers.be"><img src="images/clients/ebookers_clients.gif "border="0" align="middle"></a></p>
    <p><a target="newwindow" href="http://www.ebookers.be"><br />
      </a>

      <a target="newwindow" href="http://www.ticket.se"><img src="images/clients/ticket_clients.gif" border="0" align="middle"><br />
      </a></p>
      </a></p>

</td></tr></table>
</div>


<script language="JavaScript" type="text/javascript">

var scrollspeed     = "2"       // SET SCROLLER SPEED 1 = SLOWEST
var speedjump       = "40"      // ADJUST SCROLL JUMPING = RANGE 20 TO 40
var startdelay      = "0"       // START SCROLLING DELAY IN SECONDS
var nextdelay       = "0"       // SECOND SCROLL DELAY IN SECONDS 0 = QUICKEST
var topspace        = "10px"        // TOP SPACING FIRST TIME SCROLLING
var frameheight     = "500" // IF YOU RESIZE THE WINDOW EDIT THIS HEIGHT TO MATCH



current = (scrollspeed)


function HeightData(){
AreaHeight=dataobj.offsetHeight
if (AreaHeight==0){
setTimeout("HeightData()",( startdelay * 1000 ))
}
else {
ScrollNewsDiv()
}}

function NewsScrollStart(){
dataobj=document.all? document.all.NewsDiv : document.getElementById("NewsDiv")
dataobj.style.top=topspace
setTimeout("HeightData()",( startdelay * 1000 ))
}

function ScrollNewsDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-(scrollspeed)
if (parseInt(dataobj.style.top)<AreaHeight*(-1)) {
dataobj.style.top=frameheight
setTimeout("ScrollNewsDiv()",( nextdelay * 1000 ))
}
else {
setTimeout("ScrollNewsDiv()",speedjump)
}}


</script>

先谢谢你们!

1 个答案:

答案 0 :(得分:1)

尝试在您滚动的图像后立即放置图像副本并滚动两者。一旦第一张图像完全离开屏幕并且复制在屏幕上,将第一张图像放在复印件后面并继续滚动,直到复印件关闭屏幕并且原件完全在屏幕上。如果你不断重复这个,你应该得到无限滚动图像的错觉。