1

我有以下结构：

<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 秒我想慢慢淡化一张图像，并在它的位置显示另一张图像（其他图像标签中的现有图像之一）和我希望这种效果随机发生。

我以前从来没有这样做过，所以不知道该怎么做？我认为淡入淡出是有道理的，但不知道如何解决这个问题。有任何想法吗？

4

2 回答 2

3

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

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

这几乎就是我们需要做的所有事情，所以让我们编写一些代码：

首先，让我们重构您的标记以使用容器的 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/

于 2013-10-20T23:10:24.653 回答
1

看一看：

<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 并显示为无。此代码尚未经过测试，因此您可能需要进行一些小的调整。

于 2013-10-20T22:40:33.423 回答