如何为image1和image2添加链接

时间:2015-01-30 08:19:33

标签: javascript



function displayNextImage() {
    x = (x === images.length - 1) ? 0 : x + 1;
    document.getElementById("img").src = images[x];
}

function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    document.getElementById("img").src = images[x];
}

function startTimer() {
    setInterval(displayNextImage, 3000);
}

var images = [], x = -1;
images[0] = "image1.png";
images[1] = "image2.png";
&#13;
<html>
   <head>
      <title>change picture</title>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="startpicture.jpg">
   </body>
</html>
&#13;
&#13;
&#13;

  

我有两张图片:image1和image2 - 会自动更改。   从现在起5秒钟我需要附上两张图片的链接,即   image1和image2。请帮帮我这个

2 个答案:

答案 0 :(得分:0)

不是最好的方法,但这很简单,是您进行改进的良好起点。 我不确定你想要链接这么做,除非你得到更多关于你希望这个链接显示为什么以及你想要它做什么的信息,否则你可以解决剩下的问题... < / p>

如果你不明白我做了什么/添加了什么,那么请在你的问题中阅读我的评论帖。

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
            document.getElementById("Links").innerHTML=links[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
            document.getElementById("Links").innerHTML=links[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "http://i.stack.imgur.com/IehB7.png";
images[1] = "http://untroubled.org/backgrounds/space/stars.gif";
        var links = [];
        links[0]="Link One";
        links[1]="Link Two";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="startpicture.jpg">
     <span id="Links"></span>
          </body>
</html>

答案 1 :(得分:0)

这会吗?

<html>
  <head>
    <title>change picture</title>
  </head>

  <body>
    <a id="img-link" href="startpicture.jpg">
      <img id="img" src="startpicture.jpg">
    </a>

    <script type = "text/javascript">
      var images = ["img.png", "img.bmp"], x = -1;
      var imageElem = document.getElementById("img");
      var imageAnchor = document.getElementById("img-link");
      function displayNextImage() {
        x = (x === images.length - 1) ? 0 : x + 1;
        var imagePath = images[x];
        imageElem.src = imagePath;
        imageAnchor.href = imagePath;
      }

      function displayPreviousImage() {
        x = (x <= 0) ? images.length - 1 : x - 1;
        var imagePath = images[x];
        imageElem.src = imagePath;
        imageAnchor.href = imagePath;
      }

      function startTimer() {
        setInterval(displayNextImage, 3000);
      }
      document.addEventListener("DOMContentLoaded", function(e) {
        startTimer();
      });
    </script>
  </body>
</html>