スヌーク・スライドショー

Question

私はスライドショーを見ましたが、そこからすべてのコードを取得しましたが、画像は消えません。古いものの前に追加され、私のウェブサイトを過充電します。誰もそれを解決する方法を知っていますか？ここでは、コードです：このfiddleで

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

、それは動作しますが、私のウェブサイトでは、それはしていません。どんな助け？

詳細

• このimageコンソールにエラー
• ..コンソールからではありませんので、あなたが作成された画像の量を見ることができます。

EDIT

私は同じサイトから別のスライドショーを取得するために行きましたが、私は複数得ることができる、と私は一つのことを除いて欲しいものだ、フェードインが盗聴されて、それが起動しますフェードした後、キャンセルして次の画像に変わります。

<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

私はスライドショーを修正する必要があるコードをいくつか更新しました。構文エラーがあり、セレクタを読みやすくしました。

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