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中的元素数量：

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()可能会导致混乱。在您的情况下，如果您真的想这样做，您可以fadeOut()之前fadeIn()所有图片$(".slideshow img").fadeOut(); $(".slideshow :nth-child("+count+")").fadeIn();。这解决了这个问题。

hide()

{{1}}也应该有用。

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

如何使用fadeIn（）过渡到最后一张幻灯片

4 个答案: