Phew..enough conditions there ?
So, I needed this javascript image rotator which would pick files from a folder and show them randomely rotating through the images ...
Meh.. here is what I googled and searched and figured out
First put a placeholder on the page...
<div id="imageDiv">
<script language="javascript" type="text/javascript">
document.write('<center><img src="' + adBanner1 + '" id="adBanner5" width="620" height="250" border="0" alt="Some Alt Text">');
document.write('</center>');
</script>
<noscript>
<img src="/Images/rotate/1.jpg" id="adBanner5" border="0" width="620" height="250"
alt="Some ALt Text" /></noscript>
</div>
Now, getting a random number ...after all the first image should be random no ??
<script language="JavaScript" type="text/javascript">
<!--
rnd.today = new Date();
rnd.seed = rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed * 9301 + 49297) % 233280;
return rnd.seed / (233280.0);
};
function rand(number) {
var result = Math.ceil(rnd() * number);
if (!result) result++;
return result
};
</script>
Now that we have a random number, lets populate the image
<script language="javascript" type="text/javascript">
//the total number of images to rotate
var ad_cnt1 = 20;
var ad1 = rand(ad_cnt1);
var link1;
var adBanner1;
var width1
var height1
var i = 0;
for (i = 0; i <= ad_cnt1; i++) {
if (ad1 == i) {
adBanner1 = "/images/rotate/" + i + ".jpg";
}
} </script>
Now... using the rotator to rotate through the images
var currentAd5 = 1;
function cycle5() {
if (currentAd5 == ad_cnt1) {
currentAd5 = 1;
}
var banner5 = document.getElementById('adBanner5');
banner5.src = "/images/rotate/" + currentAd5 + ".jpg";
currentAd5++;
}
window.setInterval("cycle5()", 5000);
Hmm so my final code would look like such:
In the head of the page I put this Javascript :
<script language="JavaScript" type="text/javascript">
<!--
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
}
function restoreText(field) {
if (field.value == '') field.value = field.defaultValue;
}
rnd.today = new Date();
rnd.seed = rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed * 9301 + 49297) % 233280;
return rnd.seed / (233280.0);
};
function rand(number) {
var result = Math.ceil(rnd() * number);
if (!result) result++;
return result
};
var ad_cnt1 = 20;
var ad1 = rand(ad_cnt1);
var link1;
var adBanner1;
var width1
var height1
var i = 0;
for (i = 0; i <= ad_cnt1; i++) {
if (ad1 == i) {
adBanner1 = "/images/rotate/" + i + ".jpg";
}
}
var currentAd5 = 1;
function cycle5() {
if (currentAd5 == ad_cnt1) {
currentAd5 = 1;
}
var banner5 = document.getElementById('adBanner5');
banner5.src = "/images/rotate/" + currentAd5 + ".jpg";
currentAd5++;
}
window.setInterval("cycle5()", 5000);
-->
</script>
And where I need to rotate the images I put this div
<div id="imageDiv">
<script language="javascript" type="text/javascript">
document.write('<center><img src="' + adBanner1 + '" id="adBanner5" width="620" height="250" border="0" alt="Some Alt Text">');
document.write('</center>');
</script>
<noscript>
<img src="/Images/rotate/1.jpg" id="adBanner5" border="0" width="620" height="250"
alt="Some Alt Text" /></noscript>
</div>
By the way "window.setInterval("cycle5()", 5000);" does the rotation at 5 sec interval... you can change it to suit your needs
And you are welcome
