0

サイトのコンテンツ セクションに画像 (id = "slideshow") があります。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);
    }
    });
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 に答える