Функция Javascript для фотогалереи

0

Я создаю статическую страницу, где у меня есть изображение и 2 стрелки (одна слева от изображения и одна справа). Нажав на стрелку, появится другое изображение, например, в фотогалерее. Всего всего 4 изображения, которые я буду хранить в папке сайта на своем компьютере. В основном стрелки должны позволить пользователю перемещаться между изображениями, нажимая стрелку вправо или стрелку влево.

У меня есть массив изображений:

var imageArray = new Array();
imageArray[0] = new Image(); imageArray[0].src = 'image1.png';
imageArray[1] = new Image(); imageArray[1].src = 'image2.png';
imageArray[2] = new Image(); imgArray[2].src = 'image3.png';
imageArray[3] = new Image(); imageArray[3].src = 'image4.png';

И две стрелы:

<div id="apDiv1"style="display:none"><img src="arrow left.png" width="125" height="74" onClick="SOMETHING">/div>

<div id="apDiv2"style="display:none"><img src="arrow right.png" width="125" height="74" onClick="SOMETHING">/div

Я хочу, чтобы onClick вызывал функцию, которая показывает следующее (или предыдущее) изображение.

Как я могу это сделать? Я, хотя, вроде как функция переключения, но это будет работать плохо.

Кроме того, можно настроить начальный образ, например:

<div id="apDiv3"style="display:none"><img src="image1.png" width="200" height="200">/div>
  • 0
    Это твой HTML?
  • 0
    так что вы хотите, чтобы кто-то написал содержание SOMETHING для вас, если я правильно понимаю?
Показать ещё 8 комментариев
Теги:
function
image

1 ответ

1
Лучший ответ

Перемещение вперед (перемотка вперед)

CSS:

.show {
    display: block;
}

.hide {
    display: none;
}

Теперь предположим, что у вас есть родительский div со всеми подобными изображениями

<div class='parent'>
    <div id='image-1' class='show'><img src="image1.png" width="200" height="200"></div>
    <div id='image-2' class='hide'><img src="image2.png" width="200" height="200"></div>
    <div id='image-3' class='hide'><img src="image3.png" width="200" height="200"></div>
    //and so on...
</div>

Код Javascript:

onclick: function() {
    var images = $('.parent').find('div');
    for(var i = 0; i< images.length; i++) {
        if($(images[i]).hasClass('show')) {
            $(images[i]).removeClass('show');
            $(images[i]).addClass('hide');
            if(i === images.length -1) {
                $(images[0]).removeClass('hide');
                $(images[0]).addClass('show');
            } else {
                $(images[0]).removeClass('show');
                $(images[0]).addClass('hide');
            }
        }
    }
}

Аналогично, реализуйте для стрелки назад стрелки

Надеюсь это поможет

Поделиться
  • 0
    Большое спасибо :) Понял все, кроме CSS ... Должен ли я поставить это на CSS каждого изображения?
  • 0
    хм .. Сделайте что-то подобное в своей голове html-- <head> <style> .show {display: block; } .hide {display: none; } </ style> </ head>
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню