Javascript图像滚轮，如何保持滚动而不重新启动？

我有这个脚本，从底部到顶部垂直滚动图像，除了一件事外，它工作得很好。我希望这个滚动是无限的，不要在每次框架为空时重新启动。换句话说，我不希望它在任何时候都是空的。Javascript图像滚轮，如何保持滚动而不重新启动？

你们认为这是可能的吗？下面的代码（我知道剧本是很可怕，但我试过这么多，这是唯一一个没有的伎俩对我来说）：

<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>

感谢你提前家伙！

来源

2011-04-27 MstrQKN

尝试将图片的副本紧跟在您正在滚动的图片上并滚动。一旦第一张图像完全离开屏幕并复制到屏幕上，将第一张图像放在副本后面并继续滚动，直到副本离开屏幕并且原件完全显示在屏幕上。如果你不断重复这一点，你应该得到一个无限滚动图像的幻觉。

来源

2011-04-27 20:10:22

@Justin Pearce：我尝试过，但不幸的是它没有改变任何东西。我不知道为什么，但我试着把图片的副本放在原来的图片下面。不知何故，它根本不起作用：/ – MstrQKN 2011-04-27 20:33:52

贾斯汀走上正轨。这就是我如何在http://www.eze2go.com/000001上进行“连续”滚动 - 唯一的区别是技术。如果将两个元素嵌套两倍于其他元素的宽度，然后对它们进行样式设置，以便显示外部元素的滚动条，则只需隐藏滚动条，并为外部元素scrollTop或scrollLeft属性设置动画。如果你看一下http://www.eze2go.com/js/scroller.js，你可以看到它测试的是，增加滚动条的位置是否实际上做了任何事情，如果没有效果，那么重新开始。大部分的痛苦都在CSS中。 – 2011-04-27 21:52:49

@Lee Kowalkowski：你的剧本看起来很有前途。我试图用你的脚本使用我的图像，但它不会启动。我所做的只是将ScrollLeft更改为ScrollTop，但它并没有成功。以下是我在css/html之后编写的内容： – MstrQKN 2011-04-27 22:12:21

Javascript图像滚轮，如何保持滚动而不重新启动？

回答

相关问题