jQuery按时间间隔更换图像 [英] jQueryReplacing images at time intervals

问题描述

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

I'm trying to add christmas lights to my logo. I was going to do this in flash but I'm trying to move away from flash so I decided to try it with jQuery.

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

A quick google search returned this tutorial. Which did a pretty good job getting me on the right track. The problem is that I don't want the images to fade in and out so I replaced

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

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

with $active.show(function() $next.show().addClass('active');

这个问题是它只旋转一次图像然后我尝试使用隐藏，但它会产生奇怪的缩小效果。

The problem with this is that it only rotates though the images once then stops. I tried using hide instead but it does a weird zoom-out effect.

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

In short, I have 4 images and i'm trying to cycle though them using this code:

    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>

见此处部分工作全码或不工作的jsfiddle

See partly working full code here or not working jsfiddle

推荐答案

尝试此;

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

工作示例

奖金（随机更改）

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

这篇关于jQuery按时间间隔更换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！