图像链接与JavaScript

时间:2015-04-24 09:12:11

标签: javascript image random hyperlink

我不是javascript,但我真的想在我的索引页面上随机化图片,所以想知道我能用我当前的javascript添加图片链接到每张图片吗?

< img id = "reklame" / >
  < script >
  function getRandomImage() {
    var images = ['bilder/reklame.jpg', 'bilder/reklame1.jpg', 'bilder/reklame2.jpg', 'bilder/reklame3.jpg'];
    var image = images[Math.floor(Math.random() * images.length)];

    return image;
  }

function displayRandomImage() {
  var htmlImage = document.getElementById("reklame");
  htmlImage.src = getRandomImage();
}
displayRandomImage(); < /script>

4 个答案:

答案 0 :(得分:1)

您可以使用setInterval功能

执行此操作
//First call
displayRandomImage();
var loop = setInterval(function() {
    //Call each 5 seconds
    displayRandomImage()
}, 5000);

jsFiddle

答案 1 :(得分:1)

希望这会奏效:

<html>
<head></head>
<body>
<div id = "reklame">
<img  / >
</div>
  <script type="text/javascript">
  function getRandomImage() {
    var images = ['bilder/reklame.jpg', 'bilder/reklame1.jpg', 'bilder/reklame2.jpg', 'bilder/reklame3.jpg'];
    var image = images[Math.floor(Math.random() * images.length)];

    return image;
  }

function displayRandomImage() {
  var imgDiv = document.getElementById("reklame");
  var image = imgDiv.getElementsByTagName('img')[0];
    image.src = getRandomImage();
  var a=document.createElement('a');
     a.href=getRandomImage();
     a.appendChild(image);
    imgDiv.appendChild(a);
} 

window.setInterval(function(){
      displayRandomImage();
}, 5000);
</script>
</body>
</html>

答案 2 :(得分:0)

也许是这样的?

<a id="reklame-link" href="#";>
<img id = "reklame" />

function displayRandomImage() {
var htmlImage = document.getElementById("reklame");
var htmlLink = document.getElementById("reklame-link");
var randomImage = getRandomImage();
htmlImage.src = randomImage;
htmlLink.href = randomImage; 
console.log(getRandomImage()); 
}

http://jsfiddle.net/y7rwhmd7/

答案 3 :(得分:0)

setInterval()

中调用displayRandomImage()
window.setInterval(function(){
      displayRandomImage();
}, 5000);

尝试这个小提琴 - http://jsfiddle.net/yellen/twf16y5a/4/

小提琴已更新,可将网址与每张图片相关联

&#13;
&#13;
function getRandomImage() {
  var images = [{
      "image": "http://freethumbs.dreamstime.com/8/big/free_89634.jpg",
      "url": "http://www.google.com"
    }, {
      "image": "http://freethumbs.dreamstime.com/14/big/free_144227.jpg",
      "url": "http://www.facebook.com"
    }, {
      "image": "http://freethumbs.dreamstime.com/22/big/free_229201.jpg",
      "url": "http://www.stackoverflow.com"
    }]
    // You'd like store the image path and the url as a single object and have an array of that 
    //images = [{img, url},{img, url}]
  var image = images[Math.floor(Math.random() * images.length)];
  return image;
}

function displayRandomImage() {
  var htmlImage = document.getElementById("reklame");
  var link = document.getElementById("myuA");
  var imageObj = getRandomImage();
  htmlImage.src = imageObj.image;
  link.href  = imageObj.url;
}
displayRandomImage();
window.setInterval(function() {
  displayRandomImage();
}, 5000);
&#13;
<a id="myuA" href="" target="_blank">
  <img id="reklame" />
</a>
&#13;
&#13;
&#13;