如何添加链接切换图像?

时间:2014-03-30 21:14:52

标签: javascript jquery html css

我有一个div,每5秒更换一次图像,然后重复循环。它从文件夹中获取图像。如何将每个图像链接到网站或博客?

HTML:

<div><img id="img" src="pictures7/1.jpg">7</div>

JavaScript的:

function displayImage(image) {
          document.getElementById("img").src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);           
      }

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

      var images = [], x = -1;
      images[0] = "pictures7/" + "1.jpg";
      images[1] = "pictures7/" + "2.jpg";
      for(var y=2;y<4;y++){
      images[y]= "pictures7/" + (y+1) + ".jpg";
      }

1 个答案:

答案 0 :(得分:0)

jquery循环是最好的解决方案(http://jquery.malsup.com/cycle/):

<div id="s1">
<div class="cell" id="s11"><a href="link1"><img src="1.jpg"></a></div>
<div class="cell" id="s11"><a href="link2"><img src="2.jpg"></a></div>
<div class="cell" id="s11"><a href="link3"><img src="3.jpg"></a></div>
</div>

<script>
$(function(){

$('#s1').cycle({
fx:     'fade', 
width: '100%',
height: '100%',
pause: true,
timeout: 5000 
});
});
</script>