javascript - 使用随机起始图像滚动图像

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);

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

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);