ansaurus

Question

how to rotate images in banner using Javascript?

Answer 1

+1 A:

try something like this, this example sets the background image of a page:

var gSlideshowInterval = 10; /* the interval in seconds */
var gImageCapableBrowser;
var gCurrentImage = 0; /* the default image in the array of images */
var randombgs=["images/body/clarinet.jpg", "images/body/jazzsax.jpg", "images/body/composing.jpg", "images/body/classical-music.jpg"];


function canManipulateImages() {
    if (document.images)
     return true;
    else
     return false;
}
function loadSlide(imageURL) {
    document.body.style.backgroundImage='url(\''+ imageURL + '\')';  /* change this line to be the actual image you want to change i.e. document.getElementbyId('MyImage').src or something similar */
    return true;
}
function nextSlide() {
    gCurrentImage = Math.floor(Math.random()*randombgs.length);
    loadSlide(randombgs[gCurrentImage]);
}

gImageCapableBrowser = canManipulateImages();
setInterval("nextSlide()",gSlideshowInterval * 1000);

Mauro 2009-12-23 09:36:10

thanks for your prompt reply, but where should i call this JS from?

Romil Nagrani 2009-12-23 09:41:41

+1 for adding code

Madi D. 2009-12-23 10:18:41

if you add a <script> tag in the head it will auto run itself...you can see the canManipulateImages and set interval arent wrapped in a function and will be called automatically by the browser on load.

Mauro 2009-12-23 11:00:15

Answer 2

+1 A:

the previous answer correct but i should do somthing to it which:

call the method on the body and then

let the function call it self so then you have an infinite loop of rottation

 var gSlideshowInterval = 10; /* the interval in seconds */
 var gImageCapableBrowser;
 var gCurrentImage = 0; /* the default image in the array of images */
 var randombgs=["images/body/clarinet.jpg", "images/body/jazzsax.jpg", "images/body/composing.jpg", "images/body/classical-music.jpg"];

  function canManipulateImages() {
    if (document.images)
        return true;
    else
        return false;
}
function loadSlide(imageURL) {
    document.body.style.backgroundImage='url(\''+ imageURL + '\')';  /* change this line to be the actual image you want to change i.e. document.getElementbyId('MyImage').src or something similar */
    return true;
}
function nextSlide() {
    gCurrentImage = Math.floor(Math.random()*randombgs.length);
    loadSlide(randombgs[gCurrentImage]);

    // the code changed here
    setInterval("nextSlide()",gSlideshowInterval * 1000);

}

 //and this will be call once a page load 
function onBodyLoad()
{
    gImageCapableBrowser = canManipulateImages();
    nextSlide();
}


</script>

and here is the html source

    <body onload="onBodyLoad">
</body>

peacmaker 2009-12-23 10:15:28

+1 for automating the actual solution :)

Madi D. 2009-12-23 10:19:30

ansaurus

tags:

views:

answers:

how to rotate images in banner using Javascript?

related questions