Question

好的，所以我让老虎机看起来很相似 - 为此我需要制作5张图片的精灵然后说500高度然后100宽度（每张图像是100x100）。我需要它，以便我在图像顶部有一个按钮，按钮中有一个按钮和图像 - 所以我可以使用按钮按钮（精灵上的新位置）或前一个顶部按钮进入下一张图片。

我希望有人可以帮助我，因为我一直在寻找可以全天使用的东西。我相信你们中的一些人非常简单。

THX

Answer 1

我相信你拥有所有的碎片，你只需要把它们放在一起，所以让我们把它分开。

如果您跟踪当前正在显示的图像，并且您知道每个图像的高度，则可以很容易地计算出正确的背景位置。假设我们称之为跟踪变量i。请注意，i必须为零才能使其正常工作。我们假设每张图像的高度为100px。我们还乘以-1得到您需要的负值。

var position = "0 " + (i * 100 * -1) + "px"; // Will be something like "0 -100px"

您可以使用jQuery的.css()更改背景位置：

$("#your-image-container-id").css("backgroundPosition", position);

您可以使用jQuery .click()为按钮添加点击事件监听器。

$("#your-button").click(function () {
    /* 
    Do your rotation magic here
    For the next button increase i by one and apply the new position
    For the prev button you decrease i by one instead...
    */
});

有了这些，我相信你应该能够组装你需要的代码。如果你被卡在某个地方，请随时提问。

<强>更新

我为你准备了一些作品：

$(function () {    
    var i = 0,
        numberOfImages = 5;

    // Handle click on next button
    $(".next-btn").click(function () {
        // Increase by one, and restart when we reach the last image
        i = ((i + 1) < numberOfImages) ? i + 1 : 0;
        var position = calculateBackgroundPosition(i);
        $(".image-container").css("backgroundPosition", position);
    });
});

function calculateBackgroundPosition(index)
{
    return "0 " + (index * 100 * -1) + "px";
}

它也可用in this fiddle。还有待完成的是实现上一个按钮，但这将是你的任务。看看下一个按钮是如何实现的，然后开始吧！

更新2：

在Firefox中设置背景位置动画似乎有点麻烦。我发现这个SO answer描述了一个扩展，使其在Firefox中正常工作。不幸的是Firefox不支持background-position-y，并且提到的扩展不支持jQuery的backgroundPosition: "+=50px"语法。所以我不得不做一个解决方法。

它不是那么顺利，但是如果你包括上面提到的扩展名。您可以使用以下代码使用它：

$(function () {    
    var i = 0,
        numberOfImages = 5;

    $(".op").click(function () {
        // Decrease by one, and restart when we reach the first image
        i = ((i - 1) >= 0) ? i - 1 : numberOfImages - 1;
        animate(this, i);
    });

    $(".ned").click(function () {
        // Increase by one, and restart when we reach the last image
        i = ((i + 1) < numberOfImages) ? i + 1 : 0;
        animate(this, i);
    });
});

function calculateBackgroundPosition(index)
{
    return "0 " + (index * 50 * -1) + "px";
}

function animate (that, i)
{
    var position = calculateBackgroundPosition(i);
    $(that).parent().find(".hjul").animate({"backgroundPosition": position});    
}

这也是working example。

当它到达最后一张图像并且应该重新开始时表现不佳，反之亦然，但这是我目前最好的。

更新3：

要使其适用于多个车轮，您需要为每个车轮设置单独的计数器变量i。否则他们会互相影响。我更新了您的代码，以便ID hjulwrapper现在是一个类hjulwrapper。 ID必须是单个元素的唯一ID。因此，请务必相应地更新您的CSS。除此之外，你必须更新你的一些代码：

$(function () {

    $(".hjulwrapper").each(function () {

        var i = 0,
            numberOfImages = 5;

        $(".op", this).click(function () {
            // Decrease by one, and restart when we reach the first image
            i = ((i - 1) >= 0) ? i - 1 : numberOfImages - 1;
            animate(this, i);
        });

        $(".ned", this).click(function () {
           // Increase by one, and restart when we reach the last image
            i = ((i + 1) < numberOfImages) ? i + 1 : 0;
           animate(this, i);
        });
    });
});

请注意，我遍历每个hjulwrapper并为每个轮子创建一个单独的微调器。

这是一个工作小提琴：http://jsfiddle.net/yEhpF/65/

单击按钮更改背景位置

1 个答案: