...

View Full Version : build image rotator but want no random



_com
01-26-2006, 03:52 PM
I started my script with this idea:

rotateImage.setAttribute('src', banners[current]);

This code is a mixture of my code and a PPK image rotator script. And works perfect.
but it is a random rotator, how to do a rotator that follows the array order but without a random pick

this code that check for a unique random pick and resets after should be without random picking,
I asume this needs a for loop. I want to show each time the following pic out of the array in a time-based infinite loop. It should be easy but not for me.


while (current == old) {
current = Math.floor(Math.random()*banners.length);
}
old = current;



var old = 0;
var current = 0;
var banners = new Array(
'pix/banner_1.gif',
'pix/banner_2.gif'),
'pix/banner_3.gif');
function initRotate() {
if (!document.getElementById) return
while (current == old) {
current = Math.floor(Math.random()*banners.length);
}
old = current;
rotateImage = document.getElementById('rh');
rotateImage.setAttribute('src', banners[current]);
setTimeout(initRotate,3000);
}

window.onload = initRotate;

liorean
01-26-2006, 04:12 PM
Well, one way to solve it is to have a counter you continuously increment, which you use the remainder operator on.
var getNext=(function(a){
var
l=a.length,
i=0;
return function(){return a;};})([i]yourarray);
Each time you call getNext you get the next item in the array. It's indifferent to what the actual item is. When it hits the end it'll go "around-the-corner" and start with the first item again.

_com
01-26-2006, 04:18 PM
Well, one way to solve it is to have a counter you continuously increment, which you use the remainder operator on.
Code:

var getNext=(function(a){ var l=a.length, i=0; return function(){return a[i++%l];};})(yourarray);

Each time you call getNext you get the next item in the array. It's indifferent to what the actual item is. When it hits the end it'll go "around-the-corner" and start with the first item again.

Thank you for replying and taking your valuable time. Is this a recursive function? Could you show me howto use this with my function? What needs to be changed and where?


var old = 0;
var current = 0;
var banners = new Array(
'pix/banner_1.gif',
'pix/banner_2.gif'),
'pix/banner_3.gif');
function initRotate() {
if (!document.getElementById) return
while (current == old) {
current = Math.floor(Math.random()*banners.length);
}
old = current;
rotateImage = document.getElementById('rh');
rotateImage.setAttribute('src', banners[current]);
setTimeout(initRotate,3000);
}

window.onload = initRotate;

liorean
01-26-2006, 04:46 PM
Assuming you have the array of images already defined, you insert the code after that in the source, and replace banners[current] with getNext() and you can then remove the code used for setting a value for current.



If you on the other hand don't have the array defined, you need to delay the creation of getNext to after you have it, which you can do by the following changes:
// This definition can be global if you wish:
function mkGetNext(a){var
l=a.length,
i=0;
return function(){return a;};
}

// This assignment you use wherever you need to create a new getNext function:
var
getNext=mkGetNext([i]yourarray);Usage is just the same for both variants.

_com
01-26-2006, 04:57 PM
thank you again. But still I dont get it as in *to implement it*. I do understand what the code you provided does.
Could you show this with my coding example so I can see.
I used current, old. It is really confusing. The best way for me: is to see it with my coding example.





var banners = new Array(
'pix/banner_1.gif',
'pix/banner_2.gif'),
'pix/banner_3.gif');



I tried to implement this but it stopped working. Meaning there are mistakes in the code.

a has no properties say the JS console


var banners = new Array(
'pix/banner_1.gif',
'pix/banner_2.gif'),
'pix/banner_3.gif');

var getNext=(function(a){ /*added */
var /*added */
l=a.length, /*added */
i=0; /*added */
return function(){return a[i++%l];};})(banners); /*added */
function initRotate() {
if (!document.getElementById) return
rotateImage = document.getElementById('rh');
rotateImage.setAttribute('src', getNext);
setTimeout(initRotate,3000);
}

window.onload = initRotate;

KC-Luck
01-26-2006, 05:59 PM
This may help?

<html>
<head>
<script>

var banners = new Array(
"pix/banner_1.gif",
"pix/banner_2.gif",
"pix/banner_3.gif");

function getNext(a) {
if (typeof a.currentIndex != "number") a.currentIndex = 0;
return a[a.currentIndex++ % a.length];
}

function initRotate() {
if (!document.getElementById) return;
var element = document.getElementById("rh");
element.setAttribute("src", getNext(banners));
setTimeout(initRotate, 1000);
}

window.onload = initRotate;

</script>
</head>
<body>
<img id="rh" src="pix/banner_1.gif">
</body>
</html>

liorean
01-26-2006, 06:02 PM
Hmm, changing it quite a bit, see if this works:

var
intervalRotate;
function initRotate() {
var
aBanners=[
'pix/banner_1.gif',
'pix/banner_2.gif',
'pix/banner_3.gif'],
oSrc=document.getElementById('rh').getAttributeNode('src'),
l=aBanners.length,
i=0;
function rotateImage(){
oSrc.value=aBanners[i++%l];
}
intervalRotate=setInterval(rotateImage,3000);
}
window.onload=initRotate;

_com
01-26-2006, 06:19 PM
Thank you all for you valuable time. This worked ok.



var banners = new Array(
"pix/banner_1.gif",
"pix/banner_2.gif",
"pix/banner_3.gif");

function getNext(a) {
if (typeof a.currentIndex != "number") a.currentIndex = 0;
return a[a.currentIndex++ % a.length];
}

function initRotate() {
if (!document.getElementById) return;
var element = document.getElementById("rh");
element.setAttribute("src", getNext(banners));
setTimeout(initRotate, 1000);
}

window.onload = initRotate;

_com
01-26-2006, 06:25 PM
the other reworked code by liorean:



var
intervalRotate;
function initRotate() {
var
aBanners=[
'pix/banner_1.gif',
'pix/banner_2.gif',
'pix/banner_3.gif'],
oSrc=document.getElementById('rh').getAttributeNode('src'),
l=banners.length,
i=0;
function rotateImage(){
oSrc.value=aBanners[i++%l];
}
if(typeof document.getElementById!='undefined')
intervalRotate=setInterval(rotateImage,3000);
}
window.onload=initRotate;

should be:


l=aBanners.length

and worked too!

Thank you for the valuable lesson!

maybe I should add the script just before the body end tag
to make it load faster


<script type="text/javascript">
initRotate();

</script>
</body>

KC-Luck
01-26-2006, 10:20 PM
Hmm, changing it quite a bit, see if this works:

var
intervalRotate;
function initRotate() {
var
aBanners=[
'pix/banner_1.gif',
'pix/banner_2.gif',
'pix/banner_3.gif'],
oSrc=document.getElementById('rh').getAttributeNode('src'),
l=aBanners.length,
i=0;
function rotateImage(){
oSrc.value=aBanners[i++%l];
}
intervalRotate=setInterval(rotateImage,3000);
}
window.onload=initRotate;

just as a note, getAttributeNode is not supported by IE browsers below 6.0.
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/getattributenode.asp

_com
01-26-2006, 10:49 PM
just as a note, getAttributeNode is not supported by IE browsers below 6.0.
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/getattributenode.asp



http://www.quirksmode.org/dom/w3c_core.html


I use the KC-luck adaptation, should work in IE5.x WIN

_com
01-26-2006, 11:01 PM
I also want to set an extra different setTimeOut when iterating the array again?

_com
01-27-2006, 04:26 PM
var
intervalRotate;
function initRotate() {
var
aBanners=[
'pix/banner_1.gif',
'pix/banner_2.gif',
'pix/banner_3.gif'],
oSrc=document.getElementById('rh').getAttributeNode('src'),
l=banners.length,
i=0;
function rotateImage(){
oSrc.value=aBanners[i++%l];
}
if(typeof document.getElementById!='undefined')
intervalRotate=setInterval(rotateImage,3000);
}
window.onload=initRotate;


Still not clear:


Only thing that I dont seem to grasp is to add a setTimeOut that is *longer* when I restart in the array again.
Meaning when I have reached banners[2] and restart looping from banners[0] I want to add an extra *longer* setTimeOut between 2 and 0 in the array.

How to store a cookie from the last stored image in the array.

KC-Luck
01-27-2006, 07:11 PM
<html>
<head>
<script>

var banners = new Array(
"pix/banner_1.gif",
"pix/banner_2.gif",
"pix/banner_3.gif");
banners.currentIndex = -1;

function initRotate() {
if (!document.getElementById) return;
banners.currentIndex++;
if (banners.currentIndex >= banners.length) banners.currentIndex = 0;
var element = document.getElementById("rh");
element.setAttribute("src", banners[banners.currentIndex]);
element.setAttribute("alt", banners.currentIndex +": "+ element.getAttribute("src"));
setTimeout(initRotate, banners.currentIndex == banners.length - 1 ? 5000 : 1000);
}

window.onload = initRotate;

</script>
</head>
<body>
<img id="rh" src="pix/banner_1.gif">
</body>
</html>

_com
01-27-2006, 08:38 PM
you built in a condition to set a other timeOut

It did not work.

Could you see what went wrong.

fishluvr
01-27-2006, 09:34 PM
Made a couple of small changes to KC-Luck's last version that should do the trick...


<html>
<head>
<script type="text/javascript">

var banners = new Array(
"pix/banner_1.gif",
"pix/banner_2.gif",
"pix/banner_3.gif");
banners.currentIndex = -1;
var delay = 1000;
function initRotate() {
if (!document.getElementById) return;
banners.currentIndex++;
if (banners.currentIndex >= banners.length) { banners.currentIndex = 0; delay = 5000; }
var element = document.getElementById("rh");
element.setAttribute("src", banners[banners.currentIndex]);
element.setAttribute("alt", banners.currentIndex +": "+ element.getAttribute("src"));
setTimeout(initRotate, delay);
}

window.onload = initRotate;

</script>
</head>
<body>
<img id="rh" src="pix/banner_1.gif">
</body>
</html>

_com
01-27-2006, 09:48 PM
I am sorry, I checked in Moz FF 1.5. No images are displayed

Actually it worked ok in the above simplified testcase.

I will rebuild my page from scratch with styles and the other scripts to see what happens.

Thanks for the valuable lesson!


Why check for the alt?

KC-Luck
01-27-2006, 10:10 PM
I was using the alt so that within IE, i could see that the value was actually being updated, for I do not have those image src's here. :)

G'Luck

_com
01-27-2006, 10:41 PM
if (banners.currentIndex >= banners.length) { banners.currentIndex = 0; delay = 5000; }

still confused though: does this line mean that when the array gets to the first image *in line*of the array, the delay gets set to 5000 millisec after

because I wanted to set a delay of 5000 millisec after we getthe last image of the array which should be banners.currentIndex = 2



element.setAttribute("alt", banners.currentIndex +": "+ element.getAttribute("src"));

is this line needed?



This means?


if (banners.currentIndex >= banners.length) { banners.currentIndex = 0; delay = 5000;

if the increment integer >=3 -> we have the first image again and then we set a delay of 5000 millisec after or before?

KC-Luck
02-01-2006, 04:01 PM
if (banners.currentIndex >= banners.length) { banners.currentIndex = 0; delay = 5000; }

still confused though: does this line mean that when the array gets to the first image *in line*of the array, the delay gets set to 5000 millisec after

because I wanted to set a delay of 5000 millisec after we getthe last image of the array which should be banners.currentIndex = 2

This is doing the same thing, however, more dynamically.
If you added another "banner_4.gif" blah... you would not need to then scan and update banners.currentIndex = 3 ....



element.setAttribute("alt", banners.currentIndex +": "+ element.getAttribute("src"));

is this line needed?
No, as mentioned, this was purely so I could see the change happen.
But, when/if you get into accessibility issues, yes you should change those values as well.



This means?


if (banners.currentIndex >= banners.length) { banners.currentIndex = 0; delay = 5000;

if the increment integer >=3 -> we have the first image again and then we set a delay of 5000 millisec after or before?
This was not my original coding.


// increment the currentIndex
banners.currentIndex++;
// if that new number is greater then our banners.length, restart loop
if (banners.currentIndex >= banners.length) banners.currentIndex = 0;
var element = document.getElementById("rh");
element.setAttribute("src", banners[banners.currentIndex]);
// if we are the last banner use a 5 sec timeout, otherwise 1 sec.
setTimeout(initRotate, banners.currentIndex == banners.length - 1 ? 5000 : 1000);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum