jQuery div 元素滚动动画，带有下一个/上一个按钮，直到所有元素结束答案

【问题标题】：jQuery div element scroll animation with next/prev button untill the end of all elementjQuery div 元素滚动动画，带有下一个/上一个按钮，直到所有元素结束
【发布时间】：2014-03-17 18:22:37
【问题描述】：

我想在滚动元素到达某个位置或总宽度的末尾时停止滚动元素，如果没有更多滚动条件，则应该禁用下一个按钮，并且上一个按钮也是如此。在下面的代码中一切正常，但我在动画之前尝试了一些 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/

【问题讨论】：

标签： jquery animation scroll sliding

【解决方案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/

【讨论】：