Пример решения задачи на языке программирования JavaScript - простая галерея картинок - OkZachet.Ru
 

OkZachet.Ru

Решение задач и контрольных работ|Помощь на экзамене|Онлайн тесты

Скоро сессия студент? OkZachet.Ru - и нет проблем
Опыт. Качество. Гарантии. Бесплатные доработки.
г. Первоуральск, тел. 8(908)639-54-09, email: admin@okzachet.ru

  • Увеличить размер шрифта
  • Размер шрифта по умолчанию
  • Уменьшить размер шрифта
Главная Информатика и программирование JavaScript Пример решения задачи на языке программирования JavaScript - простая галерея картинок
E-mail Печать PDF

Пример решения задачи на языке программирования JavaScript - простая галерея картинок

javascript

Условие:
Реализовать работу простой галереи картинок на языке JavaScript.

Результат работы на codepen.io:

Для решения данной задачи для начала сверстаем html-страницу, на которой будет отображаться наша галерея:

Код HTML (вставлять между тегами <body> и </body>):

<h1>Это очень простая галерея</h1>
<div>
<img id='image'
src="https://okzachet.ru/images/stories/programming-javascript/zadacha_06_p1.jpg"
 title="Рисунок галереи"><br>
<div>
<button id="prev" onclick="changeImg(this.id);">Пред</button>
<button id="next" onclick="changeImg(this.id);">След</button>
</div>
</div>

Как видим, основной элемент галереи - само изображение имеет id = 'image', а кнопки листания галереи имеют обработчики события нажатия клавиши. Код javascript (вставлять между тегами <head> и </head>):

<script language="javascript">
function changeImg(id){
if (id == 'prev'){
index++;
if (index == arrImg.length){
index = 0;
}
} else {
index--;
if (index == -1){
index = arrImg.length-1;
}
}
document.getElementById('image').src = arrImg[index];
}
var arrImg = [
'https://okzachet.ru/images/stories/programming-javascript/zadacha_06_p1.jpg', //index = 0
'https://okzachet.ru/images/stories/programming-javascript/zadacha_06_p2.jpg', //index = 1
'https://okzachet.ru/images/stories/programming-javascript/zadacha_06_p3.jpg' //index = 2
];
var index = 0;
</script>

В коде javascript мы создаем функцию changeImg(id), которая, собственно, изменяет изображение галереи. Поясним пару моментов:

- галерея - это динамическое изменение атрибута src у тега img;
- перечень всех картинок мы храним в массиве arrImg;
- первоначальный индекс index = 0 (что тоже самое, что и атрибут src = 'https://okzachet.ru/images/stories/programming-javascript/zadacha_06_p1.jpg');
- при листании галереи нужно обеспечить цикличность: так как индекс изменяется от 0 до количествоКартинок - 1, то когда index = 3, нужно сбросить его в значение index = 0, и, наоборот, когда index = -1, его нужно сбросить в значение index = 2 (или arrImg.length - 1).

Решение задачи на языке программирования Javascript завершено.

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

С Уважением, Администратор сайта.

Обновлено 25.08.2017 11:19  

Добавить комментарий

Перед опубликованием все комментарии модерируются!

Комментарии  

 
# Рафик 21.08.2017 23:27
интересный пример, все понятно...
Ответить | Ответить с цитатой | Цитировать
 

Пройти опрос 1

По какому предмету Вам нужна помощь?
 

Пройти опрос 2

Из какого вы города?
 

Пройти опрос 3

Что нужно добавить на сайт?