Javascript 如何检查水平滑块是否位于起点或终点

我有一个带有下一个和上一个箭头的Javascript水平滑块

我得到了页面宽度，然后是ul列表宽度（滑块的内容，它们类似于许多步骤）。我计算总宽度（包括ul列表和箭头），并在用户每次按下下一个箭头或上一个箭头时设置一个左边距，以便移动列表并查看新选项（隐藏溢出）

滑块关于={
aboutslider:function（）{
var page_width=$（窗口）.width（）；
var arrows_width=50；
var ul_list_width=1；
$（“.slider_wrapper ul.list li”）。每个（函数（）{
ul_list_width+=parseInt（$（this.width（））；
});
如果（页面宽度>=ul列表宽度）{
返回false；
}
//设置ul列表的宽度，并为下一个和上一个箭头留出空间
var width_in_total=parseInt（页面宽度-箭头宽度）；
//添加导航
$（“.slider_wrapper”）。之前（“
”）；
$（“.slider_wrapper”）。之后（“
”）；
//将新宽度重新设置为元素
$（“.slider_wrapper”）.css({
宽度：总宽度+像素中的宽度，
溢出：“隐藏”，
浮动：“左”
});
$（“.slider\u wrapper ul.list”）.width（ul\u list\u width）；
$（“.slider\u wrapper.navig.previous”）。单击（函数（）{
幻灯片（“上一页”）；
});
$（“.slider\u wrapper.navig.next”）。单击（函数（）{
幻灯片（“下一页”）；
});
滑动=功能（箭头方向）{
可变宽度滑动=总宽度中的宽度；
如果（箭头方向=“下一步”）{
可变宽度滑动=（-1）*总宽度
}
var margin to move=parseInt（$（“.slider\u wrapper\u block ul.list”）.css（“marginLeft”）+parseInt（width\u slided）；
警报（“列表宽度：+ul\u列表宽度+”，边距宽度：+margin\u to\u移动）；
/*如果（新的_边距=“0”）{
边缘左侧：0
}*/
$（“.slider\u wrapper\u block ul.list”）.animate({
marginLeft:margin\u to\u移动
},
100,
“摇摆”，
函数（）{
//回拨
}
);
};
}
};

我现在想弄清楚的是，如何检查滑块是在开始还是结束时？假设一个具有6个步骤的滑块位于开头： 上一个箭头-步骤1-步骤2-步骤3-下一个箭头

如何防止单击上一个箭头并移动列表，这意味着它将显示一个空白，因为其中有任何内容？ 单击“下一步”时，滑块将显示步骤4、5、6。然后，我想再次阻止用户再次单击“下一步”，因为没有更多步骤

---

我希望有人能在这方面帮助我，谢谢你

你可以使用

长度

获取要显示的项目编号：

var numItem = $(".slider_wrapper ul.list li").length;

将变量初始化为1（当前步骤的编号）

每次单击下一个箭头时，都会递增此变量。最后，检查该变量（当前步骤）是否等于要显示或不显示下一个箭头的项目数（numItem）

以下是一个示例（未测试）：

滑块关于={
aboutslider:function（）{
var page_width=$（窗口）.width（）；
var arrows_width=50；
var ul_list_width=1；
var currentPage=1；//已添加
var numItems=$（“.slider\u wrapper ul.list li”）.length；//已添加
$（“.slider_wrapper ul.list li”）。每个（函数（）{
ul_list_width+=parseInt（$（this.width（））；
});
如果（页面宽度>=ul列表宽度）{
返回false；
}
//设置ul列表的宽度，并为下一个和上一个箭头留出空间
var width_in_total=parseInt（页面宽度-箭头宽度）；
//添加导航
$（“.slider_wrapper”）。之前（“
”）；
$（“.slider_wrapper”）。之后（“
”）；
//将新宽度重新设置为元素
$（“.slider_wrapper”）.css({
宽度：总宽度+像素中的宽度，
溢出：“隐藏”，
浮动：“左”
});
$（“.slider\u wrapper ul.list”）.width（ul\u list\u width）；
$（“.slider\u wrapper.navig.previous”）。单击（函数（）{
幻灯片（“上一页”）；
});
$（“.slider\u wrapper.navig.next”）。单击（函数（）{
幻灯片（“下一页”）；
});
滑动=功能（箭头方向）{
可变宽度滑动=总宽度中的宽度；
如果（箭头方向=“下一步”）{
currentPage++//已添加
可变宽度滑动=（-1）*总宽度；
如果（currentPage==numItems）{//已添加
$（“.slider_wrapper.navig.next”）.fadeOut（200）；//已添加
}其他{//
$（“.slider_wrapper.navig.next”）.fadeIn（200）；//已添加
}//增加
}else if（arrow_dir==“previous”）{//Added
currentPage-->/已添加
如果（currentPage==1）{//已添加
$（“.slider_wrapper.navig.previous”）.fadeOut（200）；//已添加
}其他{//
$（“.slider_wrapper.navig.previous”）.fadeIn（200）；//已添加
}//增加
}//增加
var margin to move=parseInt（$（“.slider\u wrapper\u block ul.list”）.css（“marginLeft”）+parseInt（width\u slided）；
警报（“列表宽度：+ul\u列表宽度+”，边距宽度：+margin\u to\u移动）；
/*如果（新的_边距=“0”）{
边缘左侧：0
}*/
$（“.slider\u wrapper\u block ul.list”）.animate({
marginLeft:margin\u to\u移动
},
100,
“摇摆”，
函数（）{
//回拨
}
);
};
}
};

Firebug可以帮助

var numItem = $(".slider_wrapper ul.list li").length;

Slider_About = {
    aboutslider: function() {
        var page_width = $(window).width();    
        var arrows_width = 50;
        var ul_list_width = 1;
        var currentPage = 1;//Added
        var numItems = $(".slider_wrapper ul.list li").length;//Added
        $(".slider_wrapper ul.list li").each(function() {
            ul_list_width += parseInt($(this).width());
        });

        if (page_width >= ul_list_width) {
            return false;
        }

        //set the width of the ul list and give space to next and previous arrow
        var width_in_total = parseInt(page_width - arrows_width);

        // Add navigation
        $(".slider_wrapper").before('<p class="navig previous"></p>');
        $(".slider_wrapper").after('<p class="navig next"></p>');

        // Re-set new width to elements
        $(".slider_wrapper").css({
            width: width_in_total+"px",
            overflow: "hidden",
            float: "left"
        });

        $(".slider_wrapper ul.list").width(ul_list_width);

        $(".slider_wrapper .navig.previous").click(function() {
            slide("previous");
        });
        $(".slider_wrapper .navig.next").click(function() {
            slide("next");
        });

        slide = function(arrow_dir) {
            var width_slided = width_in_total;
            if (arrow_dir == "next") {
                currentPage++//Added
                var width_slided = (-1) * width_in_total;
                if(currentPage == numItems){//Added
                    $(".slider_wrapper .navig.next").fadeOut(200);//Added
                }else{//Added
                    $(".slider_wrapper .navig.next").fadeIn(200);//Added
                }//Added

            }else if (arrow_dir == "previous") {//Added
                currentPage--//Added
                if(currentPage == 1){//Added
                    $(".slider_wrapper .navig.previous").fadeOut(200);//Added
                }else{//Added
                    $(".slider_wrapper .navig.previous").fadeIn(200);//Added
                }//Added
            }//Added
            var margin_to_move = parseInt($(".slider_wrapper_block ul.list").css("marginLeft")) + parseInt(width_slided);
            alert("list width:"+ul_list_width+" , margin width:"+margin_to_move);

            /*if(new_margin == "0") {
                marginLeft: 0   
            }*/


            $(".slider_wrapper_block ul.list").animate({
                    marginLeft: margin_to_move
                },
                100,
                "swing",
                function() {
                    // callback
                }
            );
        };
    }
};