Блог

Главная - Вопросы по программированию - Галерея простых изображений Javascript

Галерея простых изображений Javascript

#javascript #html #image-gallery

#javascript #HTML #изображение-галерея

Вопрос:

я пытаюсь создать простую фотогалерею javascript, в которой вы можете изменить изображение с помощью 2 кнопок, на предыдущую и на следующую, есть 9 изображений, и если отображается 9-е изображение, и вы нажимаете далее, оно должно показать первое изображение, кто-нибудь может мне помочь, пожалуйста? Мой код не работает.

HTML:

 <body>
<img src="img (1).jpg" alt="" height="200">
<button id="previous">previous image</button>
<button id="next">next image</button>

JS:

 <script>
let counter = 1;
let img = document.querySelector("img");
let changeImg = function (type) {
    if (type == 1) {
        counter     
    } else {
        counter--
    }
    if (counter <= 0) {
        counter = 9
    }
    img.setAttribute("src", "img (" counter ").jpeg")
}

let previous = document.getElementById("previous")
let next = document.getElementById("next")

previous.addEventListener("click", chaneImg(1))
next.addEventListener("click", changeImg(2))

Спасибо

Ответ №1:

Ваша проблема в том, как вы добавили своих слушателей:

 previous.addEventListener("click", changeImg(1))

должно быть

 previous.addEventListener("click", (e) => changeImg(1))

Первый вызывает changeImage при загрузке.

 let counter = 1;
let img = document.querySelector("img");
let changeImg = function(type) {
  if (type == 1) {
    counter  
  } else {
    counter--
  }
  if (counter <= 0) {
    counter = 9
  }
  img.setAttribute("src", "img ("   counter   ").jpeg")
}

let previous = document.getElementById("previous")
let next = document.getElementById("next")

previous.addEventListener("click", (_e) => changeImg(1))
next.addEventListener("click", (_e) => changeImg(2))  
 <body>
  <img src="https://i.imgur.com/Att5gPe.jpg" alt="" height="200">
  <button id="previous">previous image</button>
  <button id="next">next image</button>
</body>

Комментарии:

1. Я попробовал это, и теперь он загружает первое изображение img (1).jpg, а также src работает после того, как я нажимаю на предыдущее / следующее отлично, но по какой-то причине изображения все еще не отображаются, даже 1-е, когда я нажимаю на следующее, а затем предыдущее возвращается к 1-му

2. Я использовал jpeg из кода, но это должно было быть только jpg, большое вам спасибо, теперь все работает нормально 🙂

Ответ №2:

Не проверено, но я вижу пару вещей:

опечатка в этой строке:

 previous.addEventListener("click", changeImg(1))

chaneImg(1) Для changeImg(1)

У вас также нет условия для проверки обратного этому:

 if (counter <= 0) {
    counter = 9
}

итак, попробуйте добавить

 if (counter >= 9) {
    counter = 1
}