Javascript 如何修改DIY滑块？

我是jquery的新手，我在网上找到了这个DIY滑块教程，我正在尝试修改它，以便在加载第一张图像时，后退按钮将隐藏，在加载最后一张图像时，前进按钮将隐藏，中间的任何内容都将显示两个按钮（前进和后退）。我该怎么做呢

资料来源：

---

您需要添加一个滑动计数器，并在边缘处隐藏和显示按钮

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

})

$（'#向左走'）.hide（）
$（“.slider”）.diyslider({
宽度：“400px”，//滑块的宽度
高度：“200px”，//滑块的高度
显示：1，//您希望它一次显示的幻灯片数
循环：false//禁用幻灯片上的循环
}).bind（“moved.diyslider”，函数（事件、幻灯片、幻灯片编号）{
如果（slideNumber>1）
$（“#向左走”）.show（）；
其他的
$（“#向左走”）.hide（）；
如果（slideNumber<5）
$（“#向右走”）.show（）；
其他的
$（“#向右走”）.hide（）；
})

演示：

只需添加以下内容：

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

---

无论您有多少张幻灯片，这都会起作用。

效果很好。谢谢您，不客气。但是，尤里或詹姆斯的答案更好。移动事件是一个更好的解决方案。：）谢谢你，我研究了所有三个例子，我发现这一个我喜欢，谢谢你，谢谢所有帮助我的人。我真的学到了很多。

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

})

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