[Javascript] JS Marquee Scroller Question

[Troy III Ajnej]

> It may be acting exactly as it should, but I would like to see image > 1 immediately follow image 9. Any ideas as to how to make that happen?
 
Well, this is one creative question indeed!?
 
I don't recall to have ever seen anything like that in my browsing experience at all.That's why I google-d a little and came out with nothing.
Everything I've found can already be done with marquee.
Than I came to conclusion that the "not-breaking looping image strip" script doesn't exist!(I don't even know how to properly name it!)
Because nobody ever made\wrote one.
 
Therefore I gave it a thought.
Not that it is impossible, but it does require some creativity for sure.
You surely can make a scrolling image sequence with javascript of course, but the problem is
that you are reinventing the wheel. Your question is how to make a circle out of a linear segment?
And that's a challenge.
We will need a total HTML, CSS and JavaScript collaboration for this one to come true. 
And some calibration also.
 
My solution script is very simple comparing to what I've found... (~180 KB for marquee, not even a loop!)So lets give it away:
*******
CSS begining
 
#holder{ position:absolute; left:120px;  top:120px; width:484px; height:460px; overflow:hidden; }
#roller {white-space:nowrap; margin-left:0; }
 
CSS ended
 
! My images were 160px wide so the "holder" width should be 480 + 4 px for 3 image view width.
 
HTML BEGINING
 
<DIV ID=holder>
<div id=roller><img src="DavidSylvian-DeadBeesOnACake.jpg"><img src="PeterMurphy-Deep.jpg"> <img src="ErikSanko-PastImperfektPresentTense.jpg"><img src="3DoorsDown-Another700Miles.jpg"><img src="Audioslave-OutOfExile.jpg"><img src="Bauhaus-SwingTheHartache.jpg"><!--Repeat the first three (3) to complete the circle (number depends on the view width--><img src="DavidSylvian-DeadBeesOnACake.jpg"><img src="PeterMurphy-Deep.jpg"> <img src="ErikSanko-PastImperfektPresentTense.jpg">
</div>
</DIV>
 
HTML ENDED
 
Script Begining
 
//W3C make ID=ID
var roller = document.getElementById('roller')
 
var i=0;
function rollnow(){ if(i < 980){/* You will need Explorer for this (980) value;
! alert(roller.offsetWidth) in IE to get the correct value  before adding the repeated images in HTML!
Because Firefox and Opera are not reporting it correctly, in other case we could've used universal
roller.offsetWidth for automation and dynamic html for adding repeated images. If you don't have IE than 
youll have to manually calculate the num of images * width + R  to get this value */
  i++;  roller.style.marginLeft=-i;  }else{i = - 4 } //R = resync coefficient; R=[n of repeated images - 1 * 2], where: n = (3 - 1) * 2 = 4 }//The n of repeated Images depends on view width / image width. Round it: if > 1; n = 2. If > 2; n = 3 etc.
   var intervalID = window.setInterval(rollnow, 20);Script Ended
*******
 
To make it loop faster you can always state: i = i + n; n=1,2,3,4,5,6...
 
Regards~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                         Troy III                           progressive art enterprise~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_________________________________________________________________
Try Live.com: where your online world comes together - with news, sports, weather, and much more.
http://www.live.com/getstarted
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20060805/e6a4766e/attachment.htm>