単純なjquery画像スライダー

Question

jqueryスライドショーを作成しようとしています。各スライドには独自の情報divがあり、ここにはタイトルのみが含まれています。
しかし、何かが間違っています。最初のスライドだけが実行されており、完全に正しくはありません。

HTML

<div id='wrapslider'> 
<div id='sliderins'> 

<div class='slideimgwrap'> 
<img class='slideimg' src='images/001.jpg' alt='img'> 
<div class='slideinfo'> 
<div class='slidetitle'>TITLE 01</div> 
</div> 
</div> 

<div class='slideimgwrap'> 
<img class='slideimg' src='images/002.jpg' alt='img'> 
<div class='slideinfo'> 
<div class='slidetitle'>TITLE 02</div> 
</div> 
</div> 

<div class='slideimgwrap'> 
<img class='slideimg' src='images/003.jpg' alt='img'> 
<div class='slideinfo'> 
<div class='slidetitle'>TITLE 03</div> 
</div> 
</div> 

</div> 
</div> 

CSS

#wrapslider{ 
    float:left; 
    width:57%; 
    position:relative; 
    overflow:hidden; 
} 
#sliderins{ 
    width:100%; 
} 
.slideimgwrap{ 
    position:absolute; 
    display:block; 
    width:100%; 
    left:0; top:0; 
    background:green; 
} 
.slideimg{ 
    display:block; 
    width:100%; 
    margin:0 auto; 
} 
.slideinfo{ 
    position:absolute; 
    left:0; bottom:0; 
    width:100%; 
    background:#000; 
    opacity:0.6; 
    padding:14px; 
    color:#fff; 
    letter-spacing:1px; 
    font-weight:bold; 
} 

JS

$(document).ready(function() { 
var w1 = $('#wrapslider').width(); 
var h1 = (w1/16) * 9; 
$('#wrapslider, #sliderins, .slideimgwrap').css('height', h1); 

function goleft(){ 
$('#sliderins :last-child').animate({'left': '-' + w1}, 1500, append); 
}; 

function append(){ 
    $("#sliderins :last-child").prependTo("#sliderins").css('left', 0); 
}; 

var interval = setInterval(goleft, 5000); 

}); 

JSFiddle

Answer 1

#sliderinsの最後の子を選択するために、jQueryセレクタ「#sliderins：last-child」を使用しています。あなたが実際にやっていることは、親の最後の子である#sliderins内の任意の要素を選択することです。

"#sliderins：last-child"（2か所）に変更すると、コードが機能します。 ">"は、#sliderinsの直接の子のみを選択していることを意味します（孫などはありません）

現在のスライドを取得するための別のセレクタは、 ".slideimgwrap：last-child"その親の最後の子であるクラス "slideimagwrap"を持つページ。

あなたは非常に近くでした。よくやった！

1つのマイナーグリッチ：.slideinfo divは同じ幅を持つため、コンテナの右側にプッシュアウトしますが、パディングもあります（これは、あなたの「ボックスサイジング」に応じて幅に追加されます）。 。http://www.w3schools.com/css/css3_box-sizing.asp

その他の注意事項：ここで使用することは説明されたJavaScriptは非常に寛容で、文字列は、実際の数であるが、文字列"-"を使用して負の値を構築することは少し奇妙な、不要な場合を推測しようとする負取得するには。 w1、ちょうど使用0 - w1