Simple Javascript Image Rotator

July 27, 2023 Post a Comment

I have a simple image rotator on a website consisting of 4 images that have to appear for a few seconds before showing the next one. It seems to work on its first cycle but then wh

Solution 1:

Change it to this:

else i = 0; setTimeout("sunSlideShow()", 3000);

Solution 2:

Further to my other answer (which was wrong!)... Try this:

http://jsfiddle.net/pq6Gm/13/

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scripttype="text/javascript">
    $(document).ready(function(){
        setInterval(sunSlideShow,3000);
    });
    var quotes = [
        "http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2007/07/11/sun128.jpg",
        "http://icons.iconarchive.com/icons/robinweatherall/seasonal/128/sun-icon.png",
        "http://www.astronomytoday.com/images/sun3.gif",
        "http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png"
    ];
    var i = 0;
    functionsunSlideShow() {
        document.getElementById("mySlider").src = quotes[i];
        if (i < (quotes.length-1))
            {
                i++;
            }
        else
            {
                i = 0;
            }
    }
</script><body><imgsrc="http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png"id="mySlider"/></body>

Solution 3:

==================================================================

EDIT: This is wrong... please find my other answer on this page.

==================================================================

To start with, I wouldn't use ... you're better off starting the script with jquery once the page is loaded.

Add this to your head section:

<scripttype="text/javascript">
    $(function () {
        sunSlideShow();
    }
</script>

That will fire the sunSlideShow function once the page is loaded.

Then, you're starting your slideshow with var i = 0... but when you've got to the fourth image, you're setting it to 1?

I would be tempted to use a while loop to achieve what you want.

Something like this:

<scripttype="text/javascript">
$(function () {
    sunSlideShow();
}
var quotes = newArray ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif");
var i = 0;
functionsunSlideShow(){
    while (i<4)
        {
            document.getElementById("mySlider").src = ( "IMAGES/" + quotes[i] );
            if (i<4)
                {
                    i++;
                }
            else
                {
                    i = 0;
                }
            sleep(3000);
        }
}
functionsleep(miliseconds){
    var currentTime = newDate().getTime();
    while (currentTime + miliseconds >= newDate().getTime()){}
}
</script>

This script hasn't been tested... but it should start the sunSlideShow function once the page has loaded and then change the image every 3 seconds.

Solution 4:

I too searched the web trying to find a general solution to the problem of rotating an image about its center. I came up with my own solution which works perfectly. The basic concept is simple: rotate the entire context by the desired angle (here called 'tilt'); calculate the image's coordinates in the NEW coordinate system; draw the image; lastly, rotate the context back to its original position. Here's the code:

var xp = rocketX * Math.cos(tilt) - rocketY * Math.sin(tilt);
        var yp = rocketX * Math.sin(tilt) + rocketY * Math.cos(tilt);
        var a = rocketX - xp;
        var c = Math.sqrt(a*a + (rocketY-yp)*(rocketY-yp));
        var beta = Math.acos(a/c);
        var ap = c * Math.cos(tilt + beta);
        var bp = c * Math.sin(tilt + beta);
        var newX = rocketX + ap;
        var newY = rocketY - bp;
        context.rotate(tilt);
        context.drawImage(littleRocketImage, newX-9, newY-40);          
        context.rotate(-tilt);

In the penultimate line, the constants '9' and '40' are half the size of the image; this insures that the rotated image is placed such that its center coincides with the center of the original image.

One warning: I use this only for first quadrant rotations; you'll have to put in the standard tests for the other quadrants that change the signs of the components.

Solution 5:

Update: 2021

You can use the light-weight library Ad-rotator.js to setup simple Ad-rotation like this -

<scriptsrc="https://cdn.jsdelivr.net/npm/ad-rotator"></script><script>const instance = rotator(
    document.getElementById('myelement'),     // a DOM element
      [                                       // array of ads
        { url: 'https://site1.com', img: 'https://example/picture1.jpg' },
        { url: 'https://site2.com', img: 'https://example/picture1/picture2.jpg'},
        // ...
      ]
  );
</script><bodyonLoad="instance.start()"><divid="myelement"></div><body>

Reference Tutorial

Html5 Tips