如何使用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();
});