时间戳

首页 > 解决方案 > 一张一张地随机淡入 6 张图像网格

javascript - 一张一张地随机淡入 6 张图像网格

问题描述

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

我正在尝试做这里发生的事情：https ://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html但是这个脚本已经有 8 年历史了，不能与较新的 jQuery 一起使用，无论如何我想自己重做.

我需要什么（好吧，营销要我做什么：D）：有一个 6 个图像网格，随机交叉淡入淡出到另一个图像，但是一个接一个。它也不应该重蹈覆辙。

到目前为止，我已经这样做了，但是所有的交叉淡入淡出都是 6 x 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/

有人可以帮我吗？

标签： javascriptjqueryhtmlcssfrontend

解决方案

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

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

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/

推荐阅读