Javascript image scroller, how to keep it scrolling without restarting?
I have this script that scrolls images vertically from bottom till the top and it works pretty good except for one thing. I would like this scrolling to be infinite and not to restart every time the frame is empty. In other words, I don't want it to be empty at any time.
You guys think this is possible? Here's the code (I know the script is pretty awful but I've tried so many and this is only one that did the trick for me):
<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> </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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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 = 开发者_Go百科"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>
Thanks you in advance guys!
Try putting a copy of the image immediately following the one you are scrolling and scroll both. Once the first image leaves the screen completely and the copy is on screen, put the first image behind the copy and continue scrolling until the copy is off screen and the original is completely on screen. If you keep repeating this, you should get the illusion of an infinitely scrolling image.
加载中,请稍侯......
精彩评论