如何检查水平滑块是在开头还是结尾

Question

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

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

Slider_About = {
    aboutslider: function() {
        var page_width = $(window).width();    
        var arrows_width = 50;
        var ul_list_width = 1;
        $(".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") {
                var width_slided = (-1) * width_in_total
            }
            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
                }
            );
        };
    }
};

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

如何防止单击上一个箭头并移动列表，这意味着它将显示一个空白区域，因为那里有任何东西？ 当我单击下一步时，滑块将显示 step4、5、6。然后我想再次阻止用户再次单击下一步，因为没有更多步骤。

希望有人能帮帮我，谢谢

Answer 1

您可以使用length 获取要显示的项目数：

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

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

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

这是一个例子（未测试）：

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