Question

我在尝试创建更改数组中图像的脚本时遇到了一个小问题。主要目的是在您单击按钮时显示10张图片。单击下一个按钮开始混合所有10张图片而不是离开。它应该在没有jQuery的情况下完成。感谢您的建议。

HTML

<button value="show" id="Show">Show Images</button>
<button value="swap"  id="Swap" onclick="swapimg()">Swap Images</button>
<div id="image"></div>
<ul>
</ul>

JS

var ul = document.querySelector('ul');
var buttons = document.querySelector('#Show');
buttons.addEventListener('click', add);
var img = ["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg","f.jpg","g.jpg","h.jpg","i.jpg","j.jpg"];
function add() {
    for(var i=0; i<10; i++) {
        var li = document.createElement('li');
        var img1 = document.createElement('img');
        img1.src=img[i];
        ul.appendChild(li);
        li.appendChild(img1);
        buttons.style.display = "none";
    }
}

function swapimg() {
    var myImage1 = new Array();
    myImage1[1] = "a.jpg";
    myImage1[2] = "b.jpg";
    myImage1[3] = "c.jpg";
    myImage1[4] = "d.jpg";
    myImage1[5] = "e.jpg";
    myImage1[6] = "f.jpg";
    myImage1[7] = "g.jpg";
    myImage1[8] = "h.jpg";
    myImage1[9] = "i.jpg";
    myImage1[10] = "j.jpg";
    var random = Math.floor(Math.random() * myImage1.length);
    document.getElementById("image").innerHTML = "<img src='" 
  + myImage1[random] + "' alt='image'></img>";
}

Answer 1

您可以使用随机函数在每次点击中随机播放，为您提供可用于生成rando图像的随机数组：

function swapimg() {
  var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].sort(function() {
    return .5 - Math.random();
  });

  ul.innerHTML = "";

  for (var i = 0; i < random.length; i++) {
    add(random[i]);
  }
}

希望这有帮助。

＆＃13;

var ul = document.querySelector('ul');
var buttons = document.querySelector('#Show');
buttons.addEventListener('click', addImg);
var img = ["a.jpg", "b.jpg", "c.jpg", "d.jpg", "e.jpg", "f.jpg", "g.jpg", "h.jpg", "i.jpg", "j.jpg"];


function addImg() {
  ul.innerHTML = "";

  for (var i = 0; i < 10; i++) {
    add(i);
  }
}

function add(i) {
  var li = document.createElement('li');
  var img1 = document.createElement('img');
  img1.src = img[i];
  img1.alt = img[i];
  ul.appendChild(li);
  li.appendChild(img1);
  buttons.style.display = "none";
}

function swapimg() {
  var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].sort(function() {
    return .5 - Math.random();
  });

  ul.innerHTML = "";

  for (var i = 0; i < random.length; i++) {
    add(random[i]);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button value="show" id="Show">Show Images</button>
<button value="swap" id="Swap" onclick="swapimg()">Swap Images</button>
<div id="image"></div>
<ul>
</ul>

＆＃13;

Answer 2

问题是你没有洗牌。使用随机数，您可以发现您有重复的图像。几个月前我做了类似的事情。以下代码随机播放列表。希望它有所帮助：

function shuffle(list) {
    if(list.length <= 1) return list;
    const first = list.splice(list.length/2);
    if(Math.random() > 0.5) return suffle(first).concat(shuffle(list));
    else return suffle(list).concat(suffle(first));
}

此代码将列表分成两半，直到您只有一个元素，然后它再次开始合并，但有50％的机会交换给定列表。

按钮单击时从阵列交换图像

2 个答案: