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圖像滾輪，如何保持滾動而不重新啓動？

回答

相關問題