Ich habe folgenden Aufschlag:

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

Mit css:

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

Ich möchte durch die Bilder radeln. Dies funktioniert gut, wenn ich bei Bild 0 beginne:

$('.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);

, aber wenn ich ein zufälliges Startbild auswähle, beginnt es mit diesem sichtbaren Bild, blendet dann aber Bild 2 ein, wenn es [zufällige Bildnummer] +1 einblenden soll

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 Geige

Zufallszahl Geige

0
Matt Wilko 21 Nov. 2013 im 13:27

3 Antworten

Beste Antwort

Hier ist die AKTUALISIERTE DEMO

JS-Code

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);
1
Rohit Agrawal 21 Nov. 2013 im 09:58

Versuchen Sie diese Geige

Ich habe die JS ziemlich langatmig verlassen, damit Sie folgen können:

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);
1
SW4 21 Nov. 2013 im 10:27

Das Problem ist, dass Sie nicht alle Bilder außer dem zufällig indizierten ausblenden, sondern nur die Bilder mit einem Index, der größer als der zufällig generierte ist, mit diesem Code:

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

Sie können den Selektor :visible verwenden und den obigen Code mit ändern

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

Auf diese Weise verbergen Sie ALLE Bilder mit Ausnahme des zufällig ausgewählten

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

Geige http://jsfiddle.net/DS3qq/7/


FESTE SCHLEIFE

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

AKTUALISIERTES FIDDLE http://jsfiddle.net/DS3qq/15/

0
BeNdErR 21 Nov. 2013 im 10:32