使用JQuery循环替换图像scr

Question

好的，我在我网站的内容部分有一张图片(id = "slideshow")。我正在尝试创建一个循环，它使用JQuery替换图像源。这是我到目前为止拥有的代码。它似乎循环通过，但它显示的唯一src更改是最后一个。因此，glossy.jpg是我唯一看到的图像。我知道它在某种程度上肯定是有效的，因为glossy.jpg不是我设置的原始src。一旦我得到了要显示的每一张图片，我就会整理剩下的代码。任何答案都非常感谢=)

    $(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

考虑您正在制作的图像rota的以下代码。

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);
});

这就是HTML

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

因为你可以在存储URL的时候使用数组，然后使用setInterval()函数进行相同的旋转。

参考：www.burnmind.com