Question

我是jquery的新手，我在网上发现了这个DIY滑块教程，我正在尝试修改它，所以当加载第一个图像时，后退按钮将隐藏，并且当最后一个图像被加载时前进按钮将隐藏，其间的任何内容都将显示两个按钮（前进和后退）。我怎么能这样做呢？

来源：http://jsfiddle.net/id_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

只需添加：

$(".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 2

您需要添加幻灯片计数器，并在边缘处隐藏并显示按钮。

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

Answer 3

您需要处理“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();    

})

DEMO：http://jsfiddle.net/bj4yZ/456/

如何修改DIY滑块？

3 个答案: