1

我正在努力从我的 Javascript 数组中取出 3 张随机图像（不重复）并将它们打印在单独的 Div 中的屏幕上。

我的 Javascript 数组正在由一个数据库填充，该数据库包含服务器上图像的链接/位置。

目前我的页面如下所示：

<html>
   <head>
  </head>
   <body>
    <div></div>
    <script>
      var items = [
      {name:'Coch',image:'upload/coch.png'},{name:'Glas',image:'upload/glas.png'},     {name:'Melyn',image:'upload/melyn.png'},{name:'Ci',image:'upload/dog.jpg'},    {name:'Cath',image:'upload/cath.jpg'},{name:'Gwyrdd',image:'upload/gwyrdd.png'},{name:'Un',image:'upload/un.jpg'},{name:'Dau',image:'upload/dau.jpg'},{name:'Tri',image:'upload/tri.jpg'},{name:'Bochdew',image:'upload/bochdew.jpg'},{name:'Piws',image:'upload/piws.png'}      ];
      for (var i = 0; i < items.length; i += 1) {
        document.getElementsByTagName('div')[0].innerHTML += items[i].name + " / " +       items[i].image + "<br />\n";
      } 
    </script>
  </body>
</html>

此代码只是从数据库中获取图像链接并将它们插入到 javascipt 数组中。（并此刻在屏幕上打印链接）

任何人都可以帮助我如何让它工作吗？从该数组中获取 3 个随机图像链接（无重复），并在屏幕上以 3 个不同的 div 显示 3 个图像。

我对 javascipt 一点也不擅长，任何代码示例都会很棒。

提前感谢您的任何回复。

4

2 回答 2

1

洗牌你的阵列，然后取前三个项目。在这里你可以找到一个很好的随机数组函数： How to randomize (shuffle) a JavaScript array?

于 2013-02-24T22:23:00.250 回答
0

假设图像源的链接相对于图像所在的页面是正确的，这应该可以解决问题：

var list = document.getElementsByTagName('div')[0];
for(i = 0; i < 3; i++) {
  // Choose a random item and remove it from the array
  var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];

  // Create the image element and set its src attribute
  var image = document.createElement('img');
  image.src = item.image;

  // Add it to your container element
  list.appendChild(image);
}

请注意，这将修改“项目”数组，因此如果您稍后需要它，您需要先复制该数组或调整逻辑。

JSFiddle：http: //jsfiddle.net/ynhCN/1/

于 2013-02-24T22:23:22.400 回答