Question

我无法为幻灯片创建导航控件。问题是箭头返回上一个。

演示：http://jsfiddle.net/joseferreira/ka47jo7z/10/

var gridwidth = $("#special").width();
        var itens = $("#special .grid-special").length;
        var b = 0;

        $(".hidden-grid").css("width", gridwidth * itens);

        var animate = function () {
            $(".hidden-grid").stop().animate({
                marginLeft: -b * gridwidth
            }, {
                duration: 1000,
                specialEasing: {
                    marginLeft: "linear",
                }
            });
        }

        $(".next, .prev").click(function (e) {
            e.preventDefault();
            if ($(this).hasClass('next')) {
                b++;
                console.log(b);
                if (b < itens) {
                    animate();
                } else {
                    alert('end');
                }
            } else {
                b--;
                console.log(b);
                if (b >= 0) {
                    animate();
                } else {
                    alert('begin');
                }
            }
        });

Answer 1

使用2dtransform（jquery.transform2d.js）插件可以做得更好。我在fiddle上创建了一个工作示例。

我还使用CSS过渡动画导航箭头。

要更好地了解CSS变换矩阵，请访问此page。

Answer 2

检查此fiddle

我编辑了JS，如果b的值变为负值，我在显示警报后递增b，对于下一个按钮，我在显示警告后减少了b。因此，两个按钮的问题都解决了。 / p>

<强> JS

$(".next, .prev").click(function(e) {
            e.preventDefault();
            if ($(this).hasClass('next')) {
                b++;
                console.log(b);
                if (b < itens) {
                    animate();
                } else {
                    alert('chegou no fim');
                    b--;
                }
            } else {
                b--;
                console.log(b);

                if (b >= 0) {
                    animate();
                }else{

                    alert('voltou para o inicio');
                    b++;

                }
            }
        });

使用导航箭头制作幻灯片

2 个答案:

检查此fiddle