Question

我希望在达到特定位置或总宽度结束时停止我的滚动元素，如果没有更多滚动条件且前一个按钮相同，则应禁用下一个按钮。下面代码中的所有工作正常但我在动画之前尝试了一些if（）条件，但它们都没有工作我的滚动器一直在继续。请查看以下示例：

var lists = $(".contents");
                for (var i = 0; i < lists.length; i += 4) {
                    j = i + 1;
                    lists.slice(i, i + 4).wrapAll("<div id='newDivforWraping" + j + "' class='new'></div>");
                }
                var total_width = $(".new").width();
                //alert(total_width);
                $(".scroller").width(total_width * 3);

                $(".next").click(function() {
                    //alert("hi");

                    if ($(".scroller").css("margin-left") !== -1160) {
                        $(".scroller").animate({
                            marginLeft: "-=580"
                        });
                    } else {
                        alert("1160");
                    }
                });
                $(".prev").click(function() {
                    //alert("hi");
                    $(".scroller").animate({
                        left: "+=580"
                    });
                });

            });

演示： http://jsfiddle.net/gsmwe3/65VRm/1/

Answer 1

我已找到上述问题的解决方案，但如果有人知道如何添加项目符号以导航幻灯片，则仍会保留子弹导航。看小提琴

var lists = $(".contents");
                for (var i = 0; i < lists.length; i += 12) {
                    j = i + 1;
                    lists.slice(i, i + 12).wrapAll("<div id='newDivforWraping" + j + "' class='new'></div>");
                }
                var total_slides = $(".scroller div").length;
                var single_width = $(".new").width();
                $(".scroller").width(single_width * total_slides);
                var xPos = $('.scroller div:last').position();
                var pos = '-' + xPos.left + 'px';
                $(".next").click(function() {
                    if ($(".scroller").css("left") < "0") {
                        $(".scroller").animate({
                            left: "+=988"
                        }, 500);
                    }
                }
                );
                $(".prev").click(function() {
                    if ($(".scroller").css("left") > pos) {
                        $(".scroller").animate({
                            left: "-=988"
                        }, 500);
                    }
                });

http://jsfiddle.net/gsmwe3/65VRm/

jQuery div元素使用next / prev按钮滚动动画，直到所有元素结束

1 个答案: