如何使用fadeIn（）過渡到最后一張幻燈片

Question

我創建了一個腳本來創建這個“幻燈片”： http ： //jsfiddle.net/LWBJG/2/

但如果我在第一張幻燈片上點擊“上一張”，我就不能回到最后一張幻燈片了

我嘗試使用last-child選擇器但沒有成功

我也試過直接重置計數：

 if(count==1){    
    count=2;
    $(".slideshow :nth-child("+count+")").fadeIn(); 
}

我已經堅持了兩天，我正在努力理解我做錯了什么！

剩下要做的就是在我第一張幻燈片上“站着”的時候，如果我點擊“上一張”，則轉到最后一張幻燈片

Answer 1

首先，您需要隱藏頁面首次加載時未顯示的所有其他.slideshow img元素。 你可以采用多種方式，但這是一個例子：

$(".slideshow img:not(:nth-child(" + count + "))").hide();

接下來，您需要在轉到上一個時隱藏當前顯示的幻燈片：

$(".slideshow :nth-child(" + count + ")").fadeOut();

最后，您需要在.slideshow img最后一個圖像時將計數設置為.slideshow img的元素數：

count = $(".slideshow img").length;

這是一個有效的例子： http ： //jsfiddle.net/LWBJG/22/

Answer 2

你只是沒有像在下一個按鈕循環中那樣淡出prev循環。

$(".slideshow :nth-child("+count+")").fadeOut()

另外，在css中，我輸入以下代碼：

.slideshow > img:not(:first-child) { display:none;}

這使得只有第一個img顯示為默認值，然后其他的img將根據需要淡入。 你現在擁有它的方式是計數正確更新，但你的圖像是內聯的，並且出現在當前圖像編號1后面。但是在你的下一個循環點擊時，你正確淡出了圖像。

希望這可以幫助。 這是http://jsfiddle.net/LWBJG/18/

Answer 3

使用多個fadeIn()可能會導致混亂。 在你的情況下，如果你真的想這樣做，你可以先在fadeIn()之前fadeOut()所有圖像。 這解決了這個問題。

$(".slideshow img").fadeOut(); 
$(".slideshow :nth-child("+count+")").fadeIn(); 

hide()也應該有效。

Answer 4

是的，我知道，我來晚了，但我玩了一下。 也許有人會在以后找到解決方案。

這是一個演示： http ： //jsfiddle.net/NicoO/LWBJG/25/

var $slideContainer = $(".slideshow")
var totalSlides = getAllSlides().length;
var slideIndex = 0;

function getAllSlides(){
    return $slideContainer.children("img");
}

function getSlide(index){
    return $slideContainer.children().eq(index);
}

function slideExists(index){
    return getSlide(index).length;
}

function getCurrentSlide(){
   return getSlide(slideIndex);
}

function animateSlide(){
   getAllSlides().fadeOut();
   getCurrentSlide().fadeIn(); 
}

$("#next").on("click", function () {
   slideIndex++;
   if(!slideExists(slideIndex))
       slideIndex = 0;

    animateSlide();    

});

$("#prev").on("click", function () {
   slideIndex--;
   if(!slideExists(slideIndex))
       slideIndex = totalSlides-1;

    animateSlide();
});