Question

我正在尝试为我的徽标添加圣诞灯。我打算在flash中执行此操作，但我正试图摆脱flash，所以我决定尝试使用jQuery。

快速谷歌搜索返回this tutorial。这让我在正确的轨道上做得非常好。问题是我不希望图像淡入淡出，所以我更换了

$active.fadeOut(function() $next.fadeIn().addClass('active');

与 $ active.show（function（）$ next.show（）。addClass（'active'）;

这个问题是它只会旋转，但图像会停止。我尝试使用hide代替，但它做了一个奇怪的缩小效果。

简而言之，我有4个图像，我正在尝试使用此代码循环它们：

    function swapImages(){
  var $active = $('#myGallery .active');
  var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
  $active.show(function(){
  $active.removeClass('active');
  $next.show().addClass('active');
  });
}
  $(document).ready(function(){
      setInterval('swapImages()', 1000);
})

HTML：

  <div id="myGallery">
      <img src="br_xmas_1.png" class="active" />
      <img src="br_xmas_2.png" />
      <img src="br_xmas_3.png" />
     <img src="br_xmas_4.png" />
</div>

See partly working full code here或不工作jsfiddle

Answer 1

试试这个;

function swapImages() {
    var $current = $('#myGallery img:visible');
    var $next = $current.next();
    if($next.length === 0) {
        $next = $('#myGallery img:first');
    }
    $current.hide();
    $next.show();
}

$(document).ready(function() {
    // Run our swapImages() function every 0.5 secs
    setInterval(swapImages, 500);
});

Working example

奖金（Random change）

function swapImages() {
    var random = Math.floor(Math.random()*3),
        $current = $('#myGallery img:visible');
    $current.hide();
    if($current.index() == random) {
        random = ++random % 4;
    }
    $('#myGallery img').eq(random).show();
}

$(document).ready(function() {
    // Run our swapImages() function every 0.5 secs
    setInterval(swapImages, 500);
});

Answer 2

啊，已经回答了。

试试这个one

你使用了show（）函数，它将display：block样式添加到元素中。因此，一次运行后，所有图像立即显示，最后一个图像显示在其他图像之上，以便显示一个。

jQuery按时间间隔更换图像

2 个答案: