Question

我有一张精灵表50px * 300px我希望它可以点击，所以它会转到三张不同的图片，每张图片应该有一个变量A 1 2和3.这意味着当你点击它时会转到第二张图片变量myVar应为myVar=2;，当您点击它时，第三次myVar应为myVar=3;，依此类推。

Answer 1

    var spriteSheetIndex = 0; // Using a 0-indexed variable is easier

    // Assuming you can split your sprites into 3 separate images
    var imageSources = [
        "https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-one_31-fe0f-20e3.png",
        "https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-two_32-fe0f-20e3.png",
        "https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-three_33-fe0f-20e3.png",
    ]
    var imageAlts = ["image1", "image2", "image3"];
    function nextImage() {
        spriteSheetIndex = (spriteSheetIndex + 1) % 3;
        var spriteImage = document.getElementById("spritesheetimage");
        spriteImage.src = imageSources[spriteSheetIndex];
        spriteImage.alt = imageAlts[spriteSheetIndex];
    }

    <img id="spritesheetimage"
     src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-one_31-fe0f-20e3.png"
     alt="image1" height="100" width="100" onclick="nextImage()">

如何制作可点击的精灵表？

1 个答案: