Сделайте изображения кликабельными к следующему изображению в JavaScript

Question

У меня есть ссылка Предыдущая / Следующая на моем сайте, которая позволяет мне просматривать изображения с этим кодом: <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>

Answer 1

Как насчет:

document.slideImage.onclick = nextImage;

Я бы также предложил использовать регистрацию событий (также для якорей):

document.slideImage.addEventListener('click', nextImage);

Answer 2

Я бы не рекомендовал использовать 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 приписывать.