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

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

1 个答案: