Question

我有以下结构：

<div class="container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="image_wall_thumbnail" />
     <img src="images/3.png" class="image_wall_thumbnail" />
     <img src="images/4.png" class="image_wall_thumbnail" />
     <img src="images/5.png" class="image_wall_thumbnail" />
     <img src="images/6.png" class="image_wall_thumbnail" />
</div>

我想要做的是使用我在图像标签中使用的现有图像，并且每隔2-5秒我想慢慢淡化一个图像，并在其中显示另一个图像（另一个图像中的一个现有图像）我希望这个效果随机发生。

我之前从未这样做过，所以不确定如何解决这个问题？我认为淡入淡出是有道理但不确定如何解决这个问题。有什么想法吗？

Answer 1

好的，就像任何编程任务一样，你想把这样的东西分解成简单的步骤。在这种情况下，可能是这样的：

页面加载时，仅显示第一张图片。要做到这一点，你应该对所有图像都有一个display:none CSS规则，除了第一个图像。这可以通过创建一个名为hide的类并将其应用于HTML来轻松完成。我们也可以通过JS来管理这个，但这可能会导致错误，具体取决于用户拥有的互联网连接......
每隔五秒钟，淡出当前图像，淡出下一张图像。
如果我们在最后一张图片上，请务必返回列表中的第一张图片。

这几乎是我们所需要的，所以让我们写一些代码：

首先，让我们重构您的标记以使用容器的id，然后将CSS类添加到除第一个之外的所有图像。

<div id="img_container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="hide image_wall_thumbnail" />
     <img src="images/3.png" class="hide image_wall_thumbnail" />
     <img src="images/4.png" class="hide image_wall_thumbnail" />
     <img src="images/5.png" class="hide image_wall_thumbnail" />
     <img src="images/6.png" class="hide image_wall_thumbnail" />
</div>

接下来，让我们写一点CSS：

.hide {
    display:none;
}

好的，现在是我们写一些JS的“棘手”部分：

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container').find('img'),
      max = $img.length, //how many images you have in the container
      current = 0; //we will start the script at the first item

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img[current]).fadeOut('fast', function(){
      determineIndex(); //Update the index of the image in the img array
      $($img[current]).fadeIn();
    });
  }, 5000);

  function determineIndex () {
    current = (current === max - 1) ? 0 : (current + 1);
  }
});

现在这是演示！ http://jsfiddle.net/T2nzh/

如果您对javascript的工作方式有任何疑问，请发表评论。：）

编辑：好的，所以如果你想随机换出图像源，请检查一下。你想要的HTML：

<div id="img_container">
     <img src="images/1.png" style="background:red" class="image_wall_thumbnail" />
     <img src="images/2.png" style="background:silver" class="image_wall_thumbnail" />
     <img src="images/3.png" style="background:purple" class="image_wall_thumbnail" />
     <img src="images/4.png" style="background:yellow" class="image_wall_thumbnail" />
     <img src="images/5.png" style="background:green" class="image_wall_thumbnail" />
     <img src="images/6.png" style="background:blue" class="image_wall_thumbnail" />
</div>

<div id="img_spares" style="display:none;">
     <img src="images/7.png" style="background:magenta" class="image_wall_thumbnail" />
    <img src="images/8.png" style="background:brown" class="image_wall_thumbnail" />
</div>

和JS：

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container'),
      $spares = $('#img_spares'),
      max = $img.find('img').length,
      spares_max = $spares.find('img').length;

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img.find('img')[randomIndex(0,max)]).fadeOut('fast', function(){
      var $el = $(this),
          el_source = $el.attr('style'),
          $swap = $($spares.find('img')[randomIndex(0,spares_max)]),
          swap_source = $swap.attr('style');

      $el.attr('style', swap_source).fadeIn();
      $swap.attr('style', el_source);
    });
  }, 1000);

  function randomIndex (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
});

演示：http://jsfiddle.net/T2nzh/3/

Answer 2

看看：

<div class="container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="image_wall_thumbnail" />
     <img src="images/3.png" class="image_wall_thumbnail" />
     <img src="images/4.png" class="image_wall_thumbnail" />
     <img src="images/5.png" class="image_wall_thumbnail" />
     <img src="images/6.png" class="image_wall_thumbnail" />
</div>

然后是jQuery：

var slide = 1;

function slideshow() {
    $("#container").find("img").animate({opacity:0});
    setTimeout('$("#container").find("img").hide();',400);
    setTimeout('$("#container").find("[src='images/"+slide+".png']").show();',400);
    setTimeout('$("#container").find("[src='images/"+slide+".png']").animate({opacity:1});',400);
    slide++;
}

var slideshow = setInterval("slideshow();",3000);

另外，将不透明度设置为0并对所有图像显示为none。此代码尚未经过测试，因此您可能需要进行一些小的调整。

如何在JQuery中创建图像“更改”效果？

2 个答案: