如何在JavaScript中无限重复随机图像？

Question

我有一个渲染随机图片的函数，但当图片数组到达末尾时，它会停止工作。我的目标是使用另一种随机顺序的图片重新启动函数，使函数可以无限地工作。我已经阅读了其他问题，但没有找到适合我情况的东西。

以下是HTML部分：

    <div class="card">
        <div class="front" onClick="pickimg();return false;"><img 
        src="1.jpg" alt=""></div>
        <div class="back"><img src="2.jpg" name="randimg"></div>
    </div>

Css（防止出错）：

.card {
 width: 200px;
 height: 300px;
 position: relative;
 perspective: 1000px;
 cursor: pointer;
 margin: 0 50px;
}

.front, .back {
 width: 100%;
 height: 100%;
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: 1s;
 backface-visibility: hidden;
 border-radius: 10px;
}

.front {
 transform: rotateY(360deg);
}

.back  {
 transform: rotateY(180deg);
}

还有JS：

var cards = document.querySelectorAll('.card')

Array.from(cards).forEach(function(card) {
 card.addEventListener('click', function() {
Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
  ['back', 'front'].forEach(function(s) {
    el.classList.toggle(s)
  });
  });
 });
 });

 var usedImages = {};
 var usedImagesCount = 0;

function pickimg(){
var imagenumber = 3;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array();
images[0] = "";
images[1] = "3.jpg";
images[2] = "4.jpg";
images[3] = "2.jpg";
var image = images[rand1];
if (!usedImages[rand1]){
    document.randimg.src = images[rand1];
    usedImages[rand1] = true;
    usedImagesCount++;
    if (usedImagesCount === images.length){
        usedImagesCount = 0;
        usedImages = {};
    }
 } else {
    pickimg();
 }
 }

感谢您的帮助。

- Антон Портнянко

---

我正在尝试重新开始图像的随机化，因为现在当第三张图片显示时 - 随机化停止了，而我想以不同（另一种）顺序重新开始它。 - Антон Портнянко

Answer 1

尝试一下 -

int lastIndex = Math.round(Math.random()*(imagenumber - 1)) + 1;
function pickImg(){
        let imagenumber = 3;
        int currIndex = Math.round(Math.random()*(imagenumber - 1)) + 1;    
        images = new Array();
        images[0] = "2.jpg";
        images[1] = "3.jpg";
        images[2] = "4.jpg";
        if (lastIndex !== currIndex) {      
            document.randimg.src = images[currIndex];
            lastIndex = currIndex;
        }
        else {
            pickImg();
        }
}

如果您没有看到任何图像显示，那么这意味着当images[index]返回undefined时，您需要处理它。简而言之，您需要始终将index在images中设置为某个值。

- Darshan

Answer 2

你可以尝试这样做：

您可以尝试类似于以下内容：

let img = [1,2,3,4,5];

function switchImage () {

  for(; ; ){
    let x = Math.random() * 10;
  
    if(typeof img[Math.round(x)] !== 'undefined') {
      img.splice(x, 1);
      break;
    }
    
  }

  console.log(img);
  
  if (img.length > 0){
      setTimeout(() =>  switchImage (),1000);
  }
  

}


switchImage();

这是一个简化的示例，每秒钟函数会再次调用自己并从图像数组中选择一个新图像。旧图像将被从数组中剔除，当每张图片都显示完毕时，函数将停止调用自己。

- Willem van der Veen

---

这仅适用于2个图像，不能阻止图像在单个周期中再次出现。 - Adrian

当数组中没有图像时，函数停止运行，我的目标是重新启动已有的函数。它可以工作，但在显示第三张图片后也会停止，点击卡片后图像不会改变，我希望它以不同的顺序再次改变。谢谢您的帮助。 - Антон Портнянко

Answer 3

这样简单的方式怎么样？对你有用吗？至少不会连续输出相同的数字。

var imgArr = [1, 2, 3, 4, 5, 6] // imagine this is your img
var lastImgIndex;

function loadImg() {
  var RandomIndex = Math.floor((Math.random() * imgArr.length) + 1);
  if (lastImgIndex != RandomIndex) {
    $('span').text(RandomIndex + ' index of img show');
    lastImgIndex = RandomIndex;
  } else {
    loadImg();
  }

}
loadImg();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>

- Munkhdelger Tumenbayar