Question

好的，我的网站内容部分中有一张图片（id =“幻灯片”）。我正在尝试使用JQuery创建一个交替使用图像src的循环。这是我到目前为止的代码。它似乎循环，但它显示的唯一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

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

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()函数进行相同的旋转。

Referance：www.burnmind.com

使用JQuery循环来交替图像src

1 个答案: