0

好的，所以我在网站的内容部分中有一张图片（id = "slideshow"）。我正在尝试创建一个使用 JQuery 交替图像 src 的循环。这是我到目前为止的代码。它似乎循环通过，但它显示的唯一 src 更改是最后一个。结果，glossy.jpg 是我看到的唯一图像。我知道它必须在某种程度上工作，因为光泽.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);
    }
    });
4

1 回答 1

3

考虑此代码用于您正在制作的图像旋转器。

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

于 2012-07-05T19:20:58.847 回答