我有带这些代码的图片幻灯片:-
Jquery:-
$(function() {
var current = 0,
$imgs = jQuery('#header .abc71');
imgAmount = $imgs.length;
$($imgs.css('position', 'absolute').hide().get(0)).show();
window.setInterval(swapImages, 4000);
function swapImages() {
var $currentImg = $($imgs[current]);
if(current == imgAmount-1) current = -1;
var $nextImg = $($imgs[++current]),
speed = 1500;
// animation speed should be the same for both images so we have a smooth change
$currentImg.fadeOut(speed);
$nextImg.fadeIn(speed);
}
});
html:-
<div id="header">
<img class="abc71" src="img1.png"/>
<img class="abc71" src="img2.png" />
<img class="abc71" src="img3.png"/>
</div>
这些脚本运行良好。但我想以随机顺序显示图像。我如何为此修改我的脚本。还是我应该使用任何其他脚本?请帮助我...谢谢
最佳答案
明白了。我更新了您的一些代码以使其更清晰。使用像 :hidden 和 :visible 这样有趣的选择器。他们真的很棒。
这是 fiddle :
$(function () {
var current = 0,
$imgs = jQuery('#header .abc71');
imgAmount = $imgs.length;
$($imgs.css('position', 'absolute').hide().get(0)).show();
window.setInterval(swapImages, 1000);
function swapImages() {
var $currentImg = $('.abc71:visible');
var $nextImg = $('.abc71:hidden').eq(Math.floor(Math.random() * $('.abc71:hidden').length));
speed = 500;
// animation speed should be the same for both images so we have a smooth change
$currentImg.fadeOut(speed);
$nextImg.fadeIn(speed);
}
});
关于jquery - 使用 jQuery 的随机图像幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15540434/