Question

我有一个没有响应的JQuery Slider代码。

Slider有4个图像和2个按钮：Next和Previous。当用户到达最后一个图像时，不应该看到下一个按钮，当用户在第一个图像上时，不应该看到前一个按钮。

但在所有其他时间，应该看到下一个和上一个按钮。

我在这里压缩了整个目录：Click

我不希望有人真正坐下来调试我的代码，但即使我被告知为什么我的JS不起作用，我也会受到足够的帮助。

我是Jquery和JS的新手。任何帮助将不胜感激。

JS代码（在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.
});

除了不工作之外你还有另一个问题，看起来像。

现在，此代码检查下一个项目。如果找不到下一个项目，则隐藏该按钮。

之后，然后从所有图像中删除该类，并将活动类添加到下一个项目。

如果您已经在最后一个项目上并且单击下一个按钮，则您的代码仅隐藏按钮。然后它将隐藏所有图像，但由于没有找到下一个项目，因此没有任何内容可以设置为活动状态。

更改操作顺序以在设置活动项目后检查任何内容可能会对您有所帮助。

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

这样，您可以设置新的活动项目，移动滑块位置，然后检查新选择的项目后是否还有其他项目。如果没有，请隐藏按钮。

Answer 2

问题在于prev（）和next（）函数的第一行代码，即

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

上面的代码实际上是试图在锚标记下找不到的下一个/前一个元素。所以解决这个问题如下：

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

通过这种方式，您可以达到图像标记的一个级别，并且能够找到下一个/上一个锚标记。然后你可以找到那个锚标记的childern，这是你想要的图像。

希望这会有所帮助!!!

JQuery Slider不工作。下一个和上一个按钮应分别在最后一个和第一个图像时消失

2 个答案: