带链接的Javascript滑块

时间:2015-01-14 13:15:56

标签: javascript hyperlink slider

您好如何添加HTML链接?进入img1 img2 img3 img4

slider.js代码:

var imageCount = 1;
var total = 4;

function photo(x) {
    var image = document.getElementById('image');
    imageCount = imageCount + x;
    if(imageCount > total){
        imageCount = 1;
    }
    if(imageCount < 1){
        imageCount = total;
    }
    image.src = "Slide/img"+ imageCount +".png";
}

window.setInterval(function photoA() {
    var image = document.getElementById('image');
     imageCount = imageCount + 1;
      if(imageCount > total){
          imageCount = 1;
      }
      if(imageCount < 1){
          imageCount = total;
      }
      image.src = "Slide/img"+ imageCount +".png";
},5000);

Html代码:

<body onLoad="photoA()">
    <div id="slider">
        <img src="Images/img1.jpg" id="image" >
        <a id="Images/img1.jpg"><img id="image"></a>
        <div class="left_hold"><img onClick="photo(-1)" class="left" src="Images/arrow_left.png"></div>
        <div class="right_hold"><img onClick="photo(1)" class="right" src="Images/arrow_right.png"></div>
    </div>

我可以将链接放入数组吗?以及如何做到这一点? var imagelinks = [“www.link1.com”,“www.link2.com”,“www.link3.com”,“www.link4.com”];

2 个答案:

答案 0 :(得分:1)

你可以试试这个

<body onLoad="photoA()"> <div id="slider"> <a href="yourlink"><img src="Images/img1.jpg" id="image" ></a> <a href="yourlink" id="Images/img1.jpg"><img id="image"></a> <div class="left_hold"><img onClick="photo(-1)" class="left" src="Images/arrow_left.png"></div> <div class="right_hold"><img onClick="photo(1)" class="right" src="Images/arrow_right.png"></div> </div> </body>

答案 1 :(得分:0)

首先,您不能对页面上的多个元素使用相同的ID。您必须使用Classes。每个元素的ID都是唯一的。

关于锚标签内的图像,以下是您的操作方法。

<div>
  <a href='http://www.google.com'>
  <span>
    <img src='http://velocityagency.com/wp-content/uploads/2013/08/go.jpg'>
  </span>
  </a>
</div>

是的,你可以把链接放在一个数组中。只需附加&#39; http://&#39;让他们真正正确地重定向。而且我感觉你以非常错误的方式接近你的问题。您编写的代码可以以更好的方式重写。如果你想快速完成这些微不足道的工作,请考虑使用jquery。