Question

我有以下标记：

<div class="image">
    <img src="http://placehold.it/525x160" />
    <img src="http://placehold.it/525x170" />
    <img src="http://placehold.it/525x180" />
    <img src="http://placehold.it/525x190" />
</div>

用css：

.image {
    position:relative;
}
.image img {
    position:absolute;
    top:0;
    left:0;
}

我想循环播放图像。如果我从图像0开始，这可以正常工作：

$('.image img:gt(0)').hide(); // to hide all but the first image when page loads

setInterval(function () {
    $('.image :first-child').fadeOut(1000)
        .next().fadeIn(1000).end().appendTo('.image');
}, 5000);

，但是当我选择一个随机的开始图像时，它开始时此图像可见，但是当它应该淡入[随机图像编号] +1时会在图像2中淡出。

var imgNum = Math.floor(Math.random() * 3)
$('.image img:gt(' + imgNum + ')').hide(); //hide all images except the randomly picked one

setInterval(function () {
    $('.image :first-child').fadeOut(1000)
        .next().fadeIn(1000).end().appendTo('.image');
}, 5000);

Original Fiddle

Random number Fiddle

Answer 1

以下是 UPDATED DEMO

JS代码

var maxImg = $('.image img').length,
    startImg = Math.floor((Math.random()*maxImg)+1);
$('.image img').hide();
$('.image img:nth-child('+startImg+')').show();
setInterval(function () {
    $('.image img:visible').fadeOut(1000);
    if(startImg+1 > maxImg) 
      startImg = 1;
    else 
      startImg++;
    console.log(startImg);
    $('.image img:nth-child('+startImg+')').fadeIn(1000);
}, 2000);

Answer 2

尝试this fiddle

我已经把JS留了很长时间，所以你可以关注：

var imgNum = Math.floor(Math.random() * 3)
var images=[];
var imgStart=null;
$.each($('.image img'), function(index, img){
    images.push(img);
    if(index!=imgNum){
        $(img).hide();
    }
})
var counter=imgNum;
var interval=setInterval(function () {  
    $(images[counter]).fadeOut(1000);
    counter++;
    counter>=images.length && (counter=0);
    $(images[counter]).fadeIn(1000);
}, 1000);

Answer 3

问题是你没有隐藏除随机索引之外的所有图像，你只隐藏索引大于随机生成的图像，使用以下代码：

$('.image img:gt(' + imgNum + ')').hide();

您可以使用:visible选择器，并使用

更改上述代码

$('.image img:gt(' + imgNum + '), .image img:lt(' + imgNum + ')').hide();

这样，您可以隐藏除随机选择的

之外的所有图像

<强> JS

var imgNum = Math.floor(Math.random() * 3)
$('.image img:gt(' + imgNum + '), .image img:lt(' + imgNum + ')').hide();

setInterval(function () {
    $('.image img:visible').fadeOut(1000)
        .next().fadeIn(1000).end().appendTo('.image');
}, 5000);

小提琴 http://jsfiddle.net/DS3qq/7/

FIXED LOOP

var imgNum = Math.floor(Math.random() * 3)
$('.image img:gt(' + imgNum + '), .image img:lt(' + imgNum + ')').hide();
var count = $('.image img').length;

setInterval(function () {
    $('.image img:eq('+ (imgNum++) +')').fadeOut(1000);
    if(imgNum >= count){
        imgNum = 0;
    } 
    $('.image img:eq('+ (imgNum) +')').fadeIn(1000)
}, 5000);

更新后的内容 http://jsfiddle.net/DS3qq/15/

使用随机开始图像滚动图像

3 个答案: