jquery - 使用导航箭头制作幻灯片

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 .