Question

我在我正在处理的网页上使用flexbox创建了一个图像网格。网格中有8个框，我想随机选择一个，每隔2秒为其分配一个12个随机图像。我的方法是为我想要选择的图像添加一个网址数组，生成一个随机数，以选择更改其图像的框，然后选择一个随机图像并将其分配给该框的背景图像。我只想确保相同的图像不会出现两次，并且包括某种过渡而不是简单地改变图像。非常感谢任何帮助。

HTML：

<div class="stats__grid--desktop">
    <div class="grid__top">
        <div class="grid__top--item one" style="background-image: url(../css/images/work-template/bench/stats2/a.png);"></div>
        <div class="grid__top--item two" style="background-image: url(../css/images/work-template/bench/stats2/b.png);"></div>
        <div class="grid__top--item three" style="background-image: url(../css/images/work-template/bench/stats2/c.png);"></div>
        <div class="grid__top--item four" style="background-image: url(../css/images/work-template/bench/stats2/d.png);"></div>
    </div>
    <div class="grid__mid">
        <div class="grid__top--item five" style="background-image: url(../css/images/work-template/bench/stats2/e.png);"></div>
        <div class="grid__top--item six" style="background-image: url(../css/images/work-template/bench/stats2/f.png);"></div>
        <div class="grid__top--item seven" style="background-image: url(../css/images/work-template/bench/stats2/g.png);"></div>
        <div class="grid__top--item eight" style="background-image: url(../css/images/work-template/bench/stats2/h.png);"></div>
    </div>
</div>

jQuery的：

window.setInterval(function() {
                        var imgArray = ["../css/images/work-template/bench/stats2/j.png", "../css/images/work-template/bench/stats2/k.png", "../css/images/work-template/bench/stats2/l.png"]
                        var imgSelect = 0 + Math.floor(Math.random() * 2);
                        var number = 1 + Math.floor(Math.random() * 8);
                        if (number == 1) {
                            var imgChange = "one";
                        }
                        else if (number == 2) {
                            var imgChange = "two";
                        }
                        else if (number == 3) {
                            var imgChange = "three";
                        }
                        else if (number == 4) {
                            var imgChange = "four";
                        }
                        else if (number == 5) {
                            var imgChange = "five";
                        }
                        else if (number == 6) {
                            var imgChange = "six";
                        }
                        else if (number == 7) {
                            var imgChange = "seven";
                        }
                        else if (number == 8) {
                            var imgChange = "eight";
                        }
                        else {
                            var imgChange = "nine";
                        }
                        $("." + imgChange).css( "background-image", "url("+imgArray[imgSelect]+")" );
                        var temp =  $("." + imgChange).css("background-image")
                        console.log(temp)
                    }, 500);

Answer 1

根据您所解释的内容，您似乎已经正确选择了网格中的随机图片和随机项。剩下要做的就是确保您不会同时显示相同的图片。

我还建议更改您的班级名称，以便您的系统更灵活。如果使用"one"，{{1 }，"two"等，其中＆＃34; g＆＃34;代表网格项目。在这种情况下，您要执行以下操作（尝试避免硬编码）：

"three"

或者，请查看a working demo that I made on Codepen.

此外，这是转换背景图片的一种方法：CSS3 background image transition

我还想注意，您不一定需要为每个特定的网格项使用类。即使使用上面包含的修复程序也有点单调乏味。如果您需要单独访问每个单独的网格项，请尝试使用"g1"选择器，在Javascript中，您可以使用"g2"。 More info on the nth-child selector here.

编辑：最初，由于您的网址是本地的，因此存在问题，但我已添加了正则表达式来解决此问题。请参阅上面脚本中的以下行：

"g3"

Answer 2

我建议制作一个div元素的网格，每个元素包含2个交换img元素，这些元素绝对位于彼此之上。

每次交换图片时，使用splice随机删除数组中的网址并将其放在底部img中，然后在淡出顶部img时将其淡入，创造交叉淡入淡出效果。交叉淡入淡出结束后，将顶部图像的src推回到URL数组。将底部img更改为顶部以准备再次执行此操作。冲洗并重复。

我还建议，正如其他地方所述，您使用id唯一引用每个方框，并以其订单号结尾。这使得以编程方式选择元素变得容易，没有大的if / then / else语句。它还可以轻松更改网格的大小，因为您不需要更改代码，只需更改css。

我制作了一个网格，每个框的编码如下：

<div class="grid__box" id="g0">
  <img class="swap">
  <img class="swap">
</div>

g0在每个框中都是唯一的。 g1，g2，g3等

jQuery看起来像这样：

var imgArray = ["yoururlhere", "yoururlhere2", ..., "anotherurl" ];

// load the images from the array initially
function loadImages() {
  $('.grid__box').each(function(i) {
    var newImage = imgArray.splice(0,1)[0];
    $(this).find('.swap').attr('src', newImage);
  });
}

// choose a box at random, swap its image with a random one from the array
function swapImage() {
  var imgChoice = Math.floor(Math.random() * imgArray.length);
  var newImage = imgArray.splice(imgChoice,1)[0];

  var target = Math.floor(Math.random() * $('.grid__box').length);

  var mainImg = $('#g' + target + ' .swap').eq(1);
  var swapImg = $('#g' + target + ' .swap').eq(0);

  swapImg.show().attr('src', newImage);
  imgArray.push(mainImg.attr('src'));

  swapImg.fadeIn(2000);
  mainImg.fadeOut(2000, function() {
    // put the now invisible image in the back 
    // to be used as the swap image next time
    swapImg.insertAfter(mainImg);

    // do it again
    swapImage();
  });
}

loadImages();
swapImage();

JSFiddle演示：https://jsfiddle.net/ttbpbj2v/

如何使用jQuery更改网格中的图像？

2 个答案: