我有以下结构:
<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 秒我想慢慢淡出一个图像并在它的位置显示另一个图像(另一个图像中的一个现有图像标签)，我希望这种效果随机发生。
我以前从未这样做过，所以不确定该怎么做？我在想淡入淡出是有道理的，但不确定如何解决这个问题。有什么想法吗？
好吧，就像任何编程任务一样，您希望将这样的事情分解成简单的步骤。在这种情况下，可能是这样的:
- 当页面加载时，只显示第一张图片。为此，您应该对除第一个图像之外的所有图像设置
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/