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

Question

I made a script in order to create this "slideshow": http://jsfiddle.net/LWBJG/2/

yet I can not go back to the last slide if I hit "previous" when it is on the first slide

I tried using the last-child selector but had no success

I also tried resetting the count directly like so:

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

I've been stuck with this for two days, I'm trying to understand what I'm doing wrong!

all I what's left to do is to go to the last slide if I hit "previous" while I'm "standing" on the first slide

Answer 1

First you need to hide all the other .slideshow img elements not being shown when your page first loads. You can do that multiple ways, but here's an example:

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

Next, you need to hide the current showing slide when going to the previous one:

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

Finally, you need to set the count to the number of elements in .slideshow img when going to the last image:

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

Here's a working example: http://jsfiddle.net/LWBJG/22/

Answer 2

You simply were not fading out in the prev loop like you were in the next button loop.

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

Also, in the css, i put the following code:

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

This makes only the first img appear as default, and then the other ones will fade in as necessary. The way you currently have it, is count is updating properly but your images are inline and are appearing behind the current image number 1.. But on your next loop click, you properly fade out the images.

Hope this helps. Here is the http://jsfiddle.net/LWBJG/18/

Answer 3

Using multiple fadeIn() s might lead to a mess. In your case, if you really want to do so, you can first fadeOut() all images before fadeIn() the desired one. This solves the problem.

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

hide() should also work.

Answer 4

Yes i know, i'am late to the party, but I played around a bit. Maybe someone will find the solution useful later on.

Here is a demo: 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();
});