Question

我想要一个非常简单的图库，其中包含约5-7张图片，您可以在该图片上单击，然后切换到下一张图片，最后它又循环回到开头。现在，我的代码只允许我拥有3张图片，只在2张图片和3张图片之间循环。

function swaparrows(obj, i1, i2, i3) {
  var src = obj.getAttribute('src');

  if (src.match(i1))
    obj.setAttribute('src', i2);

  else
    obj.setAttribute('src', i1);
}

对于HTML：

<img src="https://minecraft-statistic.net/en/og/player/Druio.png" 
  onclick="swaparrows(this, 'https://camblab.info/wp/wp-content/uploads/2017/02/pool-water.jpg', 'https://i2-prod.mirror.co.uk/incoming/article13348246.ece/ALTERNATES/s615/0_SupernumeraryRainbows_Entwistle_13621-610x859.jp', 'https://minecraft-statistic.net/en/og/player/Druio.png')" />

Answer 1

您可以在元素上使用属性来确定当前索引是什么。然后，将该索引增加一个，并通过模运算符在数组的末尾将其加盖，以使其循环循环。另外，对于如此长的代码段，请不要使用onclick，因为它会使代码难以维护。另外，如果您不使用jQuery，则将其应用于整个页面，以便可以轻松快速地添加新的交互式内容。如果您使用的是jQuery，则不要执行此操作，因为jQuery体现并提高了性能，因此您的页面很快就会变得非常滞后。

^{?因为看起来好像您是Stackoverflow的新手，所以我将在此处解释该对勾。阅读并查看我的答案后，如果（并且仅当）您对我在此处发布的答案完全满意，那么您可以通过单击此复选标记将此答案作为最佳答案来奖励我。如果其他人发布了更好的答案，请单击其选中标记。单击复选标记不是永久的：如果以后有人发布更好的答案，则可以单击其复选标记，然后将最佳答案切换到发布的新答案。}

<img src="https://minecraft-statistic.net/en/og/player/Druio.png" 
     data-swap-index="2"
     data-swap-0="https://camblab.info/wp/wp-content/uploads/2017/02/pool-water.jpg"
     data-swap-1="https://i2-prod.mirror.co.uk/incoming/article13348246.ece/ALTERNATES/s615/0_SupernumeraryRainbows_Entwistle_13621-610x859.jpg"
     data-swap-2="https://minecraft-statistic.net/en/og/player/Druio.png" 
     style="max-height:80vh" decoding="async" />

<img src="https://www.minecraft.net/content/dam/archive/og-image/minecraft-hero-og.jpg" 
     data-swap-index="0"
     data-swap-0="https://www.minecraft.net/content/dam/archive/og-image/minecraft-hero-og.jpg"
     data-swap-1="https://is4-ssl.mzstatic.com/image/thumb/Purple123/v4/10/29/2f/10292fd0-d87a-6856-7523-f67fa8051df7/AppIcon-0-1x_U007emarketing-0-85-220-9.png/246x0w.jpg" 
     style="max-height:80vh" decoding="async" />

<script>
addEventListener("click", function(evt){
    // when anywhere on the page is clicked, this will fire
    var eventObj = evt || window.event;
    var target = eventObj.target;
    var swapIndex = target.getAttribute("data-swap-index");
    if (swapIndex !== null) {
        var newSwapIndex = (swapIndex|0) + 1|0;
        if (!target.hasAttribute("data-swap-" + newSwapIndex)) {
            // cycle back to the first image
            newSwapIndex = 0;
        }
        
        // now apply the new swap index
        target.setAttribute(
            "src",
            target.getAttribute("data-swap-" + newSwapIndex)
        );
        target.setAttribute("data-swap-index", newSwapIndex);
        
        eventObj.preventDefault(); // prevent link from opening or something
    } // else the element being clicked on is not swappable
});
</script>

请注意，我如何在属性前加上data。 WhatWG with datasets已将所有前缀为data-的属性留作特殊的自定义用途，因此，为确保自定义属性的前缀为data-始终是一个好主意。将来，您使用的属性不会基于其值而具有特殊效果地添加到规范中。

单击并循环在多（5-7）张图像之间切换

1 个答案: