Блог

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

JavaScript для изменения изображений

#javascript

#javascript

Вопрос:

У меня есть набор изображений с именем img1, img2, img3, img4,......., imgx. So, я хочу закодировать JavaScript для отображения изображения img1 document.onload() и при первом щелчке по изображению, которое нужно изменить на img2 следующее, при втором щелчке по изображению, которое нужно изменить, img3 а затем то же самое для следующего изображения при каждом NEXT нажатии кнопки. Таким образом, мне нужна четная PREVIOUS кнопка, чтобы вернуться к ранее просмотренным изображениям.

Как это реализовать?

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

1. набор изображений фиксированный или динамический?

2. Вы написали какой-либо код для этого? что-нибудь уже пробовали?

Ответ №1:

 var currentImage = 1;

window.onload = function() {
    showImage();
};

document.getElementById("next").onclick = function() {
    currentImage  ;
    showImage();
}

function showImage() {
    document.getElementById("image").src = "img"   currentImage   ".jpg";
}

Это основы, и они должны помочь вам начать работу. Если вам нужна помощь в реализации остальных, спросите нас, что конкретно вы хотите сделать и что вы пробовали. Подсказка, вам нужно будет обработать случай, когда нет «следующего» изображения для отображения. Вы хотите, чтобы он вернулся к началу или просто не работал?

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

1. необходимо также добавить предыдущий щелчок и убедиться, что функция не выходит за пределы диапазона изображений

2. @LaurenceBurke Я уверен, что, черт возьми, не буду делать все это за него. Он должен учиться и пробовать себя.

3. Просто дайте OP знать, что еще нужно добавить. Извините, я должен был поставить @ tag для этого

4. Ах. Извините за грубую реплику.

5. @Xeon06 — Этого достаточно Xeon06. Спасибо! Я буду кодировать остальное.

Ответ №2:

 <script type="text/javascript">

var images = new Array("img/image1.jpg", "img/image2.jpg", "img/image3.jpg"); 
var cur_image = 0;

function goNextImage() {
    var img = document.getElementById('image');
    cur_image  ;
    if (cur_image == images.length) {
        cur_image = 0;
    }
    img.src = images[cur_image];
}

</script>

<img src="img/image1.jpg" id="image" onclick="goNextImage()" />
Метки: