jquery imageスライダー：最後の画像に移動し、最初に戻るには「next」をクリックする必要があります。

Question

私はnivoスライダーなどをいくつか使用しました。それらを編集することは問題ではありません。今回私は自分で簡単なスライダーを作成しようとしています。私はイメージを互いにフェードイン/フェードアウトさせることができますが、最終イメージの後には何もフェードアウトせず、最初のイメージに単純にリセットする方法を理解する必要があります。現在、私は「次へ」のみを使用しています。これを済ませたら、「前の」ボタンを見つけることができます。

私はifステートメントを試しましたが、かなり得られませんでした。私は物事を読みやすくするために、これを最小限に抑えてきました。助けをお待ちしています。ここで

私のコードのすべてです：

CSS：

p {margin: 0; padding: 0} 

.slides{ 
width: 500px; height: 200px; 
position: relative; 
margin: 20px auto; 
overflow: hidden; 
} 

.img1, .img2, .img3 { 
width: 500px; height: 200px; 
display: block; 
position: relative; 
float: left; 
} 

.img1 {background-image: url(img1.png)} 
.img2 {background-image: url(img2.png)} 
.img3 {background-image: url(img3.png)} 

.title { 
width: 480px; height: 30px; 
color: white; font-size: 15px; 
padding: 10px; 
position: absolute; top: 0; 
background: url(tbg.png) 0 0 repeat; 
} 

.description { 
width: 480px; height: 30px; 
color: white; font-size: 15px; 
padding: 10px; 
position: absolute; bottom: 0; 
background: url(tbg.png) 0 0 repeat; 
} 

.prev, .next { 
width: 50px; height: 50px; 
position: absolute; z-index: 10; 
top: 50px; display: block; 
background: url(prevnext.png) 0 0 no-repeat; 
border: none; cursor: pointer; 
} 

.active{top: 0; left: 0} 


.prev {left: 20px} 
.next {right: 20px; background-position: -50px 0} 

#img:not(.active) {display:none} 

jqueryの：

$(function() { 
$('#next').click(function(event) { 
    $('#slides .active').fadeOut('slow').removeClass('active') 
    .next('#img').fadeIn('slow').addClass('active'); 

}); 
}); 

HTML：

<div id="slides" class="slides"> 
    <div id="img" class="img1 active"> 
     <div class="title"><p>This Is My Title</p></div> 
     <div class="description"><p>This Is My Description</p></div> 
    </div> 
    <div id="img" class="img2"> 
     <div class="title"><p>This Is My Title</p></div> 
     <div class="description"><p>This Is My Description</p></div> 
    </div> 
    <div id="img" class="img3"> 
     <div class="title"><p>This Is My Title</p></div> 
     <div class="description"><p>This Is My Description</p></div> 
    </div> 
    <a id="prev" class="prev"></a> 
    <a id="next" class="next"></a> 
</div> 

Answer 1

はこれを試してみてください。

$('#next').click(function(event) { 
    var active = $('#slides .active'); 
    active.fadeOut('slow').removeClass('active'); 
    if(active.next('#img').length != 0) 
     active.next('#img').fadeIn('slow').addClass('active'); 
    else 
     $('#slides #img:first').fadeIn('slow').addClass('active'); 
});