0

我的网站上有一个上一个/下一个链接，可让我使用以下代码浏览图像： <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num'></span>

我已将图像放在下面的代码中。上一个/下一个链接工作得很好，但我希望能够单击图像本身导航到下一个图像：所以单击 1.jpg 然后转到 2.jpg 等等，一旦单击 5.jpg 就可以了回到 1.jpg。请告知，提前感谢您的帮助。我是一个盲目地建立我的网站的初学者，非常感谢任何帮助。

<script type="text/javascript">

var image = new Array("jpegs/1.jpg",
"jpegs/2.jpg",
"jpegs/3.jpg",
"jpegs/4.jpg",
"jpegs/5.jpg"
)

var imgNumber=1

var numberOfImg = image.length

function previousImage(){
  if(imgNumber > 1){
    imgNumber--
    }

  else{
    imgNumber = numberOfImg
    }

document.slideImage.src = image[imgNumber-1]

  }
function nextImage(){
  if(imgNumber < numberOfImg){
    imgNumber++
    }

  else{
    imgNumber = 1
    }

document.slideImage.src = image[imgNumber-1]

  }

</script>
4

2 回答 2

1

怎么样：

document.slideImage.onclick = nextImage;

我还建议使用事件注册（也用于锚点）：

document.slideImage.addEventListener('click', nextImage);
于 2013-03-04T00:07:46.300 回答
0

我不建议使用href="Javascript:function()"，所以让您了解如何处理它......

<script type="text/javascript">
  window.onload = function() {
    var n = 0;
    var src = ["jpegs/1.jpg", "jpegs/2.jpg", "jpegs/3.jpg", "jpegs/4.jpg", "jpegs/5.jpg"];
    var e = document.getElementById('slideImage');
    var prev = function() {
      n -= 1;
      if(n < 0) n = src.length - 1;
      e.setAttribute('src', src[n]);
    };        
    var next = function() {
      n += 1;
      if(n >= src.length) n = 0;
      e.setAttribute('src', src[n]);
    };
    e.onclick = next;
    document.getElementById('nextlink').onclick = next;
    document.getElementById('prevlink').onclick = prev;
  };
</script>

此方法不会将变量写入window（不包括onload），只需要一个id属性。

于 2013-03-04T00:35:39.957 回答