如何使用 Javascript 随机显示带有链接且不重复的四个图像？

Question

我正在尝试使用相关链接随机显示四张图像，以避免每次都显示重复的图像。我找到了如何随机显示带有链接的随机图像，但我不知道如何创建循环部分以及如何检查重复项。我会很感激你的帮助。

<script>
function random_imglink(){
 var myimages=new Array()

 myimages[1]="image1.gif"
 myimages[2]="image2.gif"
 myimages[3]="image3.gif"
 myimages[4]="image4.gif"
 myimages[5]="image5.gif"
 myimages[6]="image6.gif"


 var imagelinks=new Array()
 imagelinks[1]="http://www.page1.com"
 imagelinks[2]="http://www.page2.com"
 imagelinks[3]="http://www.page3.com"
 imagelinks[4]="http://www.page4.com"
 imagelinks[5]="http://www.page5.com"
 imagelinks[6]="http://www.page6.com"

 var ry=Math.floor(Math.random()*myimages.length);

  if (ry==0)
    ry=1;

 document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>');
}

random_imglink()

</script>

提前谢谢:)

Answer 1

如this 回答中所述，您可以创建一种检查重复项的方法。

方法：

var contains = function(needle) {
  // Per spec, the way to identify NaN is that it is not equal to itself
  var findNaN = needle !== needle;
  var indexOf;

  if(!findNaN && typeof Array.prototype.indexOf === 'function') {
      indexOf = Array.prototype.indexOf;
  } else {
      indexOf = function(needle) {
          var i = -1, index = -1;

          for(i = 0; i < this.length; i++) {
              var item = this[i];

              if((findNaN && item !== item) || item === needle) {
                  index = i;
                  break;
              }
          }

          return index;
      };
  }

  return indexOf.call(this, needle) > -1;
};

用法：

var imagelinks= [0,1,2],
    index = contains.call(imagelinks, imagelinks[ry]); //boolean

Answer 2

在你的函数之外，声明一个数组来保存已经显示的元素：

var displayed = [];

然后在您的if (ry==0) 条件之后添加：

if (displayed.indexOf(ry) !== -1){
    displayed.push(ry);
    document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>');
} else {
    random_imglink();
}

Answer 3

您应该了解构造函数。当您对它们调用new 时，它们会返回一个对象，该对象具有基于构造函数的单独属性。下面是一些可以帮助您完成旅程的代码。

//<![CDATA[
// external.js
var doc, bod, htm, C, E, inArray, ShuffleMagic; // for use on other loads
addEventListener('load', function(){

doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
inArray = function(needle, haystack){
  for(var i=0,l=haystack.length; i<l; i++){
    if(haystack[i] === needle){
      return true;
    }
  }
  return false;
}
function ShuffleMagic(haystack){
  var a;
  this.haystack = haystack;
  this.alterOriginal = false;
  this.shuffle = function(limit){
    var r, s = this.haystack;
    if(!a){
      a = [].slice.call(s), l = a.length;
      for(var i=0,n=1,f,h; i<l; i++,n++){
        f = Math.floor(Math.random()*n); h = a[i]; a[i] = a[f]; a[f] = h;
      }
    }
    if(limit){
      if(a.length >= limit){
        r = a.splice(0, limit);
        if(a.length < limit)a = undefined;
      }
      else{
        a = undefined;
        return this.shuffle(s.length);
      }
    }
    else{
      r = a; a = undefined;
    }
    if(this.alterOriginal){
      s.splice.apply(s, [0, s.length].concat(r)); a = undefined;
    }
    return r;
  }
}
var imagelinks = ['http://www.page1.com', 'http://www.page2.com', 'http://www.page3.com', 'http://www.page4.com', 'http://www.page5.com', 'http://www.page6.com', 'http://www.page7.com', 'http://www.page8.com', 'http://www.page9.com',
'http://www.page10.com', 'http://www.page11.com', 'http://www.page12.com', 'http://www.page13.com', 'http://www.page14.com', 'http://www.page15.com', 'http://www.page16.com', 'http://www.page17.com', 'http://www.page18.com', 'http://www.page19.com'];
var max = E('limit'), out = E('out');
var wow = new ShuffleMagic(imagelinks);
// wow.alterOriginal = true;
// wow.haystack = ['Replace', 'other', 'array, 'example'];
E('testButton').addEventListener('click', function(){
  out.innerHTML = wow.shuffle(+max.value).join('<br />');
});

});
//]]>

/* external.css */
html,body{
  margin:0; padding:0;
}
.main{
  width:980px; margin:0 auto;
}
#limit{
  width:30px; padding-left:3px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <title>Shuffle Magic</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='test.js'></script>
  </head>
<body>
  <div class='main'>
    <label for='limit'>Limit:</label><input id='limit' name='limit' type='text' value='4' /><input id='testButton' type='button' value='Click Me' />
    <div id='out'></div>
  </div>
</body>
</html>

使用这个递归版本（现在可能超出你的理解范围），数组元素只有在它们完全或几乎完全通过时才会回收。享受吧！