 |
Image Rotator |
 |
Member Login
Welcome
Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.
In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.
 |
Zymic Webmaster Forums Web Design & DevelopmentClient Side ScriptingJavaScript |
 |
  |
 Jan 7 2008, 06:23 PM
Post
#1
|
|
 Ninja  Group: Members Posts: 134 Joined: 19-September 07 Member No.: 189  |
Anyone have a random image rotation script? lieing about somewhere that is easy to use? I've done various searches and they dont really come up with anything good.
Thanks. 
|
 |
 
|
|
Jan 7 2008, 07:40 PM
Post
#2
|
|
 Outrageously Uber Ninja Group: Administrators Posts: 2,831 Joined: 11-March 07 From: UK Member No.: 9 |
I just threw this together.
Can you keep the little comment at the top of imageRotator.js please. The object source: CODE /* * Javascript Image Rotator * @author : Ed Cradock * @date : 7 January 2008 * * For all your webdesign needs: visit http://www.zymic.com */ var _this; function imageRotator(viewport, cycleOffset) { _this = this; this.imageStack = new Array; this.offset = cycleOffset; var exists = document.getElementById(viewport); if(!eval(exists)) { alert('Element ID does not exist.'); } else { this.viewport = viewport; } } imageRotator.prototype.getRandom = function() { var random = Math.floor(Math.random() * this.imageStack.length); return this.imageStack[random]; } imageRotator.prototype.setViewport = function() { document.getElementById(_this.viewport).src = _this.getRandom(); } imageRotator.prototype.start = function() { this.setViewport(); setInterval(function() { _this.setViewport() }, _this.offset); } imageRotator.prototype.add = function(imageName) { this.imageStack.push(imageName); } Example usage: CODE <html> <head> <script type="text/javascript" src="lib/imageRotator.js"></script> <script type="text/javascript"> <!-- window.onload = function() { rotator = new imageRotator('placeholder', 1000); rotator.add('images/etch.jpg'); rotator.add('images/lenny.png'); rotator.add('images/snake.jpg'); rotator.start(); } --> </script> </head> <body> <img id="placeholder" /> </body> </html> CODE rotator = new imageRotator('placeholder', 1000); First argument (in this case is 'placeholder') is the element's id, second is the amount of milliseconds between rotation, which is 1 second in this case. There's a zip and tarball attached containing a working demo.
Attached File(s)
imagerotator.tar.gz ( 235.21k )
Number of downloads: 322
imagerotator.zip ( 235.72k )
Number of downloads: 338 |
|
|
|
|
Jan 9 2008, 05:19 PM
Post
#3
|
|
|
Ninja Group: Members Posts: 134 Joined: 19-September 07 Member No.: 189 |
Thanks very much for taking the time to do that!
|
|
|
|
|
Jan 9 2008, 08:28 PM
Post
#4
|
|
|
Outrageously Uber Ninja Group: Administrators Posts: 2,831 Joined: 11-March 07 From: UK Member No.: 9 |
QUOTE(Cspace @ Jan 9 2008, 05:19 PM)  Thanks very much for taking the time to do that! You're welcome. |
|
|
|
| |
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users) |
|
| 0 Members: | ||
|
Forum Jump |
|
| Lo-Fi Version | Time is now: 21st May 2013 - 03:11 AM |