Question

我从昨天开始尝试做一些棘手的事情（我想）。

我正在尝试完全执行此处的操作：https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html，但是此脚本已有8年历史，不能与较新的jQuery一起使用，无论如何我都想自己重做。

我需要什么（行销要我做什么：D）：具有6个图像网格，其中网格随机地淡入淡出到另一个图像，但是一个接一个。它也永远不会重复。

到目前为止，我已经做到了，但是所有交叉淡入淡出都是6乘6的。我想按随机顺序一个接一个地做它。

HTML

<div class="img-bank">
  <img style="display:none" src="https://picsum.photos/210?image=0" />
  <img style="display:none" src="https://picsum.photos/210?image=11" />
  <img style="display:none" src="https://picsum.photos/210?image=21" />
  <img style="display:none" src="https://picsum.photos/210?image=31" />
  <img style="display:none" src="https://picsum.photos/210?image=41" />
  <img style="display:none" src="https://picsum.photos/210?image=51" />
  <img style="display:none" src="https://picsum.photos/210?image=61" />
  <img style="display:none" src="https://picsum.photos/210?image=71" />
  <img style="display:none" src="https://picsum.photos/210?image=81" />
  <img style="display:none" src="https://picsum.photos/210?image=91" />
  <img style="display:none" src="https://picsum.photos/210?image=101" />
  <img style="display:none" src="https://picsum.photos/210?image=111" />
  <img style="display:none" src="https://picsum.photos/210?image=121" />
  <img style="display:none" src="https://picsum.photos/210?image=131" />
  <img style="display:none" src="https://picsum.photos/210?image=141" />
  <img style="display:none" src="https://picsum.photos/210?image=151" />
  <img style="display:none" src="https://picsum.photos/210?image=161" />
  <img style="display:none" src="https://picsum.photos/210?image=171" />
  <img style="display:none" src="https://picsum.photos/210?image=181" />
  <img style="display:none" src="https://picsum.photos/210?image=191" />
</div>

<div class="container galery">
  <div class="row">
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=1" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=2" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=3" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=4" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=5" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>
    <div class="col-4">
      <img class="img-fluid" src="https://placekitten.com/210/210?image=6" />
      <img style="display:none;" class="img-fluid" src="" />
    </div>     
  </div>
</div>

JS

$( document ).ready(function() {
  var ids = [];

  function initArray() {
    $(".img-bank img").each(function() {
      ids.push($(this).attr("src"));
    })    
  }

  function randomArray() {
    // copie du tableau d'ids car il va etre modifié
    var tempIds = ids.slice();
    // init du tableau de resultat
    var myIds = [];
    for (var i = 0; i < 6; i++) {
      // Recupere un int random
      var randomId = (Math.floor(Math.random() * tempIds.length) + 1);
      // Recupere la valeur random
      var myId = tempIds[randomId - 1];
      // Ajout de la valeur random au tableau de resultat
      myIds.push(myId);
      // Recupere l'index de la valeur random pour la suppression
      var pos = tempIds.indexOf(myId);
      // Suppression de la valeur choisie pour eviter de retomber dessus
      tempIds.splice(pos, 1);
    }
    return myIds;
  }

  initArray();

  function changeSrc() {
    var result = randomArray();
    $(".galery img:hidden").each(function(index) {
      $(this).attr("src", result[index]);   
    });
    $(".galery img").fadeToggle(1500);
  }  

  setInterval(function() {
    changeSrc();
  }, 2000);

});

少

.galery {
  margin-top: 30px;
  .row > div {
    position:relative;
    height: 240px;
    width: 240px;
    img {
      position: absolute;
      top: 0;
      left: 15;
    }    
  }  
}

https://jsfiddle.net/N_3G/ju0comn2/

有人可以帮我吗？

Answer 1

您可以随机选择一个单元格col-4，然后将逻辑仅应用于该单元格中的2x img。

在不更改现有代码太多的情况下，请更改为：

var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
  $(this).attr("src", result[index]);   
});
cell.find("img").fadeToggle(1500);

更新的小提琴：https://jsfiddle.net/ju0comn2/1/

由于Math.random()的性质，您会注意到它以相同的顺序运行相同的图像-随机播种。您还将获得相同的图像替换为相同的图像。

要对重复的图像进行基本修复，请检查是否有可见图像的src与新的src相同：

var result = randomArray();
var cells = $(".galery .col-4");    
var randomId = (Math.floor(Math.random() * cells.length));
var newsrc = result[0];

if ($(".galery img[src='" + newsrc + "']:visible").length > 0) {
   changeSrc();
}
else {
  var cell = cells.eq(randomId);
  cell.find("img:hidden").each(function(index) {
    $(this).attr("src", result[index]);   
  });
  cell.find("img").fadeToggle(1500);
}

可以使用while循环来处理此问题以保持获取randomId，但是只要您的图像多于面板，则递归调用就不太可能堆栈溢出。

更新的小提琴：https://jsfiddle.net/ju0comn2/2/

随机交叉淡化6个图像网格

1 个答案: