javascript - 如何检查水平 slider 是在开头还是结尾

Question

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

我获取页面宽度，然后获取 ul 列表宽度( slider 的内容，它们就像多个步骤)。我计算总宽度(包括 ul 列表和箭头)，并在每次用户按下一个箭头或上一个箭头时设置留出的边距，以便列表将移动并查看新选项( overflow hidden )。

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

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

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

希望有人能帮我解决这个问题，谢谢

Answer 1

您可以使用length来获取要显示的元素数:

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

将变量初始化为1(当前步骤的编号)。

每次单击下一个箭头时，都会递增此变量。最后检查此变量(当前步骤)是否等于要显示的元素数(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
                }
            );
        };
    }
};