如何修改DIY滑块？

Question

我在jquery上很新，我在网上发现了这个DIY滑块教程，我想要做的是修改它，这样当第一个图像加载时，后退按钮就会隐藏，当加载最后一个图像时，前进按钮会隐藏，中间的任何东西都会显示两个按钮(向前和向后)。我该怎么做呢？

来源：squared/bj4yZ/453/

$(document).ready(function() {
$(".slider").diyslider({
    width: "820px", // width of the slider
    height: "160px", // height of the slider
    display: 1, // number of slides you want it to display at once
    loop: false // disable looping on slides
}); // this is all you need!

// use buttons to change slide
$("#go-left").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "forth");
});

});

Answer 1

你需要处理"moved.diyslider“事件-它给你当前的幻灯片编号。知道幻灯片编号后，您可以按需要显示和隐藏按钮：

$('#go-left').hide()

$(".slider").diyslider({
    width: "400px", // width of the slider
    height: "200px", // height of the slider
    display: 1, // number of slides you want it to display at once
    loop: false // disable looping on slides
}).bind("moved.diyslider", function(event, slide, slideNumber){

    if (slideNumber > 1) 
        $('#go-left').show();    
    else
        $('#go-left').hide();    

    if (slideNumber < 5) 
        $('#go-right').show();    
    else
        $('#go-right').hide();    

})

演示： http://jsfiddle.net/bj4yZ/456/

Answer 2

只需添加以下内容：

$(".slider").bind("moved.diyslider", function(event, slide, slideNumber, actuallyMoved){
    if ($("div.slider").find(".active").is(":first-child")) {
        $("#go-left").hide();
        $("#go-right").show();
    }else if ($("div.slider").find(".active").is(":last-child")) {
        $("#go-right").hide();
        $("#go-left").show();
    }else{
        $("#go-left").show();
        $("#go-right").show();
    }
});

不管你有多少张幻灯片，这都会起作用。

Answer 3

您将需要添加一个幻灯片计数器，并隐藏和显示按钮时，你是在边缘。

http://jsfiddle.net/bj4yZ/455/

var currentSlide = 0
    maxSlides = $('.slider div div').length - 1;

$(".slider").diyslider({
    width: "400px", // width of the slider
    height: "200px", // height of the slider
    display: 1, // number of slides you want it to display at once
    loop: false // disable looping on slides
}); // this is all you need!

$('#go-left').hide();
// use buttons to change slide
$("#go-left").bind("click", function(event, slide, slideNumber, actuallyMoved){
    currentSlide--;
    checkView();
    // Go to the previous slide
    $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(event, slide, slideNumber, actuallyMoved){
    currentSlide++;
    checkView();
   // Go to the previous slide
    $(".slider").diyslider("move", "forth");
});

var checkView = function() {
    if (currentSlide == 0) $('#go-left').hide();
    else $('#go-left').show();

    if (currentSlide == maxSlides) $('#go-right').hide();
    else $('#go-right').show();
}