jQuery滑块不起作用。 下一个和上一个按钮分别在最后一个图像和第一个图像时应该消失

Question

I have a code for JQuery Slider which is not responding.

The Slider has 4 images and 2 buttons: Next and Previous. When the user reaches the last image, the Next Button should not be seen and similarly when the user is on the first image, the previous button should not be seen.

But at all other times, the next and previous buttons should be seen.

I have zipped the entire directory here: Click

I dont expect someone to actually sit and debug my code, But even if I am told why my JS doesn't work, I would be helped enough.

I am a novice with Jquery and JS. Any Help would be appreciated.

JS Code (After the Modifications suggested by Jon):

   $(document).ready(function(){
$('.slider img:first').addClass('active');                    // Here we are assigning a class "active" to the first image in the "slider" div.

var imagewidth = $('.visible-area').width();                  // Width of 1 image (should be equal to the width of "visible-area" box)
var totalimages = $('.slider img').size();                    // Total Number of images inside "slider" div.
var sliderwidth = imagewidth * totalimages;                   // Total width of "slider" div.
$('.slider').css({'width': sliderwidth});                     // Here we are assigning the width to the slider div (using the css method in jquery)

$('.next').click(function(){                                  // This following function will be executed on click of "next" button
$active = $('.slider img.active').next();                 // On click of next button, we are saving the image (next to "active" image) in a jQuery variable $active

$('.slider img').removeClass('active');                   // Remove class active from the images inside slider div.
$active.addClass('active');                               // Add the class active to the $active (next image).

var count = $active.attr('alt') -1;                       
var sliderposition = count * imagewidth;                  // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition".
$('.slider').animate({'left': -sliderposition}, 500);     // Here we are using the jQuery animate method to slide the "slider" div.

$active = $('.slider img.active').next();                 // On click of next button, we are saving the image (next to "active" image) in a jQuery variable $active

if ($active.length==0){                                 // If this is the last image inside the "slider" div, hide the next button
    $('.next').hide();
}});

$('.previous').click(function(){                              // This following function will be executed on click of "previous" button
    $active = $('.slider img.active').prev();                 // On click of previous button, we are saving the image (previous to "active" image) in a jQuery variable $active.
    if ($active.length==0){                                   // If this is the first image inside the "slider" div, hide the previous button
    //$(this).hide();
    }
    $('.slider img').removeClass('active');                   // Remove class active from the images inside slider div.
    $active.addClass('active');                               // Add the class active to the $active (next image).

    var count = $active.attr('alt') -1;                       
    var sliderposition = count * imagewidth;                  // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition".
    $('.slider').animate({'left': -sliderposition}, 500);     // Here we are using the jQuery animate method to slide the "slider" div.
});     

});

Answer 1

$('.next').click(function(){                                  // This following function will be executed on click of "next" button
    $active = $('.slider img.active').next();                 // On click of next button, we are saving the image (next to "active" image) in a jQuery variable $active
    if ($active.length==0){                                 // If this is the last image inside the "slider" div, hide the next button
    $(this).hide();
    }
    $('.slider img').removeClass('active');                   // Remove class active from the images inside slider div.
    $active.addClass('active');                               // Add the class active to the $active (next image).

    var count = $active.attr('alt') -1;                       
    var sliderposition = count * imagewidth;                  // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition".
    $('.slider').animate({'left': -sliderposition}, 500);     // Here we are using the jQuery animate method to slide the "slider" div.
}); 

You have another problem beyond that not working, it looks like.

Right now, this code checks the next item. If no next item is found, you hide the button.

After that, you then remove the class from all the images, and add the active class to the next item.

Your code only hides the button if you are already on the last item and click the next button. It then will hide all the images, but because no next item was found, it has nothing to set as active.

Changing the order of operations to check for anything after the active item is set may help you.

$('.next').click(function(){                                  // This following function will be executed on click of "next" button
    $active = $('.slider img.active').next();                 // On click of next button, we are saving the image (next to "active" image) in a jQuery variable $active

    $('.slider img').removeClass('active');                   // Remove class active from the images inside slider div.
    $active.addClass('active');                               // Add the class active to the $active (next image).

    var count = $active.attr('alt') -1;                       
    var sliderposition = count * imagewidth;                  // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition".
    $('.slider').animate({'left': -sliderposition}, 500);     // Here we are using the jQuery animate method to slide the "slider" div.

    $active = $('.slider img.active').next();                 // On click of next button, we are saving the image (next to "active" image) in a jQuery variable $active

    if ($active.length==0){                                 // If this is the last image inside the "slider" div, hide the next button
        $('.next').hide();
    }
});

This way, you set the new active item, move the slider position, and then check to see if there is any more items after the newly selected one. If there isn't, hide the button.

Answer 2

The problem is with first line of code in prev() and next() function ie

$active = $('.slider img.active').next();
$active = $('.slider img.active').prev();

Above code is actually trying to find next/previous element under anchor tag which is not there. So work around this is as below:

$active = $('.slider img.active').parent().next().children();
$active = $('.slider img.active').parent().prev().children();

By this way you will come one level up to image tag and would be able to find next/previous anchor tag. Then you can find the childern of that anchor tag, which is your desired image.

Hope this will help!!!