Галерея с JQuery Fade
Страница 1 из 2
Благодаря JQuery можно реализовать очень простой галереи изображений с очень привлекательным, в этом простом уроке мы посмотрим, как создать простой галерея исчезать или галерею, где образы в последовательности (рядом друг с другом), а не использовать эффект плавного приятно.
Для достижения наших галерей НЕ используйте никаких плагинов, но мы ограничимся рационального использования инструментов, что обеспечивает JQuery.
Мы видим, предварительный просмотр того, что мы намерены:
Мы анализируем HTML-код:
<html>
<head>
Галерея слайд <title> с JQuery </ TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"> </ SCRIPT>
<script type="text/javascript" src="fadegallery.js"> </ SCRIPT>
</ HEAD>
<body>
<div id="fadegallery"> </ P>
</ Body>
</ Html>
Мы в тело страницы, которым мы придаем fadegallery DIV ID, мы называем заголовок и внешнюю таблицу стилей, JQuery библиотеку и файл fadegallery.js которых следует код:
Функция шоу (х) {$ ("# IMG" + х) FadeIn («медленный»);.}
$ (Документ). Готовый
(
функции ()
{
$ ("# Fadegallery"). After ("
»);
уаг IMG = новый Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
IMG [0] = "pippo.jpg";
IMG [1] = "pluto.jpg";
IMG [2] = "paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
уаг я = 0;
для (я = 0; я <img.length; я + +)
{
$ ("# Fadegallery"). Append ("+ я + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ P>") ;
window.setTimeout ("шоу (" + я + ")", ((я + 1) * 1000));
}
}
);
Его работа проста: Сначала мы создаем параметризованных функция, которая вызывает функцию JQuery FadeIn для просмотра (с замираниями) различных DIV которых мы строим динамически в цикле, который извлекает все элементы в массив, который, в свою очередь, содержит изображений и макетов страниц в формате HTML.
Внутри цикла также напомнить функция выводит () с таймером работает от второго и дальнейшее увеличение секунд на каждом шаге по порядку, точнее, для создания эффекта последовательности.
Обратите внимание на заявление:
$ ("# Fadegallery"). After ("
»);
вставляется в начале функции (): Это предназначено для прокрутки любое содержание находится под DIV к дому нашей галерее (в отсутствие перекрывающихся элементов может привести к неприятным из-за поплавком собственности в CSS Мы используем это).
 |
CSS (курс)
Веб-дизайн и доступность в соответствии с W3C CSS и XHTML. Начиная от 29 €. |
 |
HTML (курс)
Язык разметки для веб от 29 €. |
 |
Javascript (курс)
Полное руководство для сценариев на стороне клиента. С 39 €. |