На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Простая галерея js - три строчки кода без jQuery


Сейчас можно найти в интернете множество навороченных галерей и слайдеров. Большинство из них использует jQuery, есть также работающие на чистом css. Обилие переходов и эффектов впечатляет. Но вот для обыкновенного сайта найти обыкновенную простую галерею без использования jQuery и других заморочек не представляется возможным. Значит, стоит её написать самостоятельно. Итак, перед вами простая галерея js - три строчки кода без jQuery.

Вот они эти три строчки:

function newOk (ij) {
zx = document.getElementById('in_scrfocus');   
zx.innerHTML = "<img src="img/Life-of-Pix-"+ij+".jpg">";}
А вот так работает эта галерея:


Для того, чтобы заработала такая галерея, надо функцию newOk заключить в теги <script> (как обычно для ява скриптов), а в нужное место на странице добавить элемент div (для показа целого изображения):

<div id="in_scrfocus" name="in_scrfocus">
<img src="img/Life-of-Pix-1.jpg" />
</div>
и уменьшенные изображения, заключенные в ссылки:

<a href='javascript:void(0);' onclick='javascript:newOk(1);'><img src="img/Life-of-Pix-1.jpg" width="110"/>
<a href='javascript:void(0);' onclick='javascript:newOk(2);'><img src="img/Life-of-Pix-2.jpg" width="110"/>
<a href='javascript:void(0);' onclick='javascript:newOk(3);'><img src="img/Life-of-Pix-3.jpg" width="110"/>





тегизаметки, javascript

Читайте также:




Как отключать тачпад при подключении мыши
Прозрачность пикселя на Java


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.