Question

Okay so I have an image (id = “slideshow”) in my content section of my site. I’m trying to create a loop that alternates the image src using JQuery. Here is the code I have so far. It seems to loop through but the only src change that it shows is the last one. As a result glossy.jpg is the only image I see. I know it must be working to some extent seeing as glossy.jpg is not the original src that I have set. Once I get each picture to show I’ll tidy up the rest of the code. Any answers are much appreciated =)

    $(document).ready(function() {

    for (i = 1; i <= 100; i++){
    $("#slideshow").attr("src", "Images/image1.jpg").fadeTo(3000, 1.00);
    $("#slideshow").fadeTo("slow", 0.00);
    $("#slideshow").attr("src", "Images/image2.jpg").fadeTo(3000, 1.00);
    $("#slideshow").fadeTo("slow", 0.00);
    $("#slideshow").attr("src", "Images/glossy1.jpg").fadeTo(3000, 1.00);
    $("#slideshow").fadeTo("slow", 0.00);
    }
    });

Answer 1

Consider this code for an image rota tor that you are making.

var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;

function rotateImage()
{
  $('#myImage').fadeOut('fast', function()
  {
    $(this).attr('src', images[index]);

    $(this).fadeIn('fast', function()
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
}

$(document).ready(function()
{
  setInterval (rotateImage, 2500);
});

And this would be the HTML

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

Since you could utilize arrays while storing URL’s into them and then so the same rotation using setInterval() function.

Referance : http://www.burnmind.com