Snooks Diashow

Question

Ich habe die Diashow gesehen, ich habe den ganzen Code von dort, aber die Bilder verschwinden nie, sie werden vor den alten hinzugefügt und es überlädt meine Website. Wer weiß, wie man es löst? Hier ist der Code:

<style> 
    .fadein { position:relative; width:500px; height:332px; } 
    .fadein img { position:absolute; left:0; top:0; } 
</style> 

<div class="fadein"> 
    <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
    <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
    <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
</div> 

$(function(){ 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000); 
}); 

In diesem fiddle, es funktioniert, aber in meiner Website, es funktioniert nicht. Irgendeine Hilfe?

Weitere Informationen

• Diese image von der Konsole, so dass Sie die Anzahl der Bilder sehen, die erstellt werden ..
• keine Fehler in der Konsole.

EDIT

Ich ging einen anderen Diashow aus dem gleichen Ort zu bekommen, aber so konnte ich mehrere bekommen, und bekam, was ich bis auf eine Sache wollte, die fadeIn abgehört wird, beginnt es zu verblassen, aber dann bricht es ab und wechselt zum nächsten Bild.

<style> 
.multipleslides { position:relative; height:332px; width:500px; float:left; } 
.multipleslides > * { position:absolute; left:0; top:0; display:block; } 
</style> 
<div class="multipleslides"> 
    <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
    <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
    <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
</div> 
<script> 
     $('.multipleslides').each(function(){ 
     // scope everything for each slideshow 
     var $this = this; 
     $('> :gt(0)', $this).hide(); 
     setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 4000); 
     }) 
    }); 
</script> 

Answer 1

Ich habe einige Aktualisierungen an Ihrem Code vorgenommen, die die Diashow beheben sollten. Es gab einige Syntaxfehler und ich habe auch die Selektoren ein bisschen einfacher zu lesen, imo.

$(document).ready(function() { 
 
    $('.multipleslides').each(function() { 
 
    // scope everything for each slideshow 
 
    $(this).children('img').not(":eq(0)").hide(); 
 
    
 
    setInterval(function() { 
 
    $(this).children('img').first().fadeOut().next().fadeIn().end().appendTo($(this)); 
 
    }.bind($(this)), 4000); 
 
    }); 
 
});

.multipleslides { 
 
    position: relative; 
 
    height: 332px; 
 
    width: 500px; 
 
    float: left; 
 
} 
 

 
.multipleslides>* { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="multipleslides"> 
 
    <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
 
    <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
 
    <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
 
</div>