Создание слайд шоу в html. Фотолаборатория. jQuery плагин слайд-шоу «Easy Slides» v1.1
В этом уроке рассмотрим программу для автоматического создания слайд-шоу на технологии HTML5.
Даже если ваши знания в javascript, css и html не позволяют вам создавать слайд-шоу самостоятельно, это можно сделать при помощи программы Hislider . Скачать ее можно по ссылке — Hislider.com . На сайте доступна как бесплатная версия, так и платная. Все действия я буду показывать в бесплатной версии. Если программа вам понравится, вы можете приобрести ее платную версию. Я создал пробное слайд-шоу. Посмотреть вы его можете по ссылке:
СкачатьКак создать первое слайд-шоу с помощью программы HisliderКогда вы установите и запустите программу перед вами появится окно программы, где предлагается начать создание слайд-шоу. Жмете на кнопку «Create New»:
Указываете необходимую ширину(width) и высоту(height) слайд-шоу:
Затем необходимо добавить изображения. Это можно сделать нажав по центру окна на ссылку либо на кнопку на панели кнопок:
После того как изображения добавлены, станет активна панель с переходами(Transmitions). Переходим на вкладку «Transmitions»:
И добавляете переходы, которые вам нравятся:
Нажимаем «OK» и попадаем в редактор слайд-шоу. Вносим необходимые изменения. Вверху есть три кнопки:
Первая кнопка «REFRESH» необходима для того чтобы обновить слайд-шоу после внесения изменений, чтобы увидеть эти изменения.
Вторая кнопка «PREVIEW» необходима предпросмотра слайд-шоу в браузере.
И последняя кнопка «PUBLISH» служит для создания слайд-шоу.
Достаточно интересная программа. Особенно если нет времени или навыков, то данная программа ваш сократит время на разработку слад-шоу для вашего сайта. Либо можно сделать меню, затем отредактировать код как ваш нужно и всё, ваше слайд-шоу готово.
- Перевод
- Tutorial
Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков.
Мы не должны злоупотреблять CSS3, потому что старые браузеры не поддерживают все его свойства. В любом случае, все мы видим потенциал CSS3, и в этой статье мы обсудим, как создать зацикленный слайдер изображений, используя только CSS3-анимацию.
Описание базовых понятий, связанные с CSS3-переходами и анимацией по ключевым кадрам.
Создание HTML-разметки для слайдера изображений.
Создание таблицы стилей для отображения слайдера.
Добавление анимации к слайдеру. Мы рассмотрим различные процессы, происходящие здесь.
Добавление индикатора выполнения для нашего слайдера.
Добавление всплывающей подсказки, для отображения заголовков.
Выводим подсказку при наведении курсором, используя CSS3-переходы
Показываем слайдер в действии.
Заключительные размышления.
Для использования этого урока необходимо иметь базовое понимание CSS, в частности CSS3-переходов и анимации по ключевым кадрам.
Оперируя этими простыми понятиями, мы увидим, как сделать функциональный слайдер изображений.
Мы можем использовать четыре свойства перехода:
Transition-property
Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.
Transition-duration
Определяет время, за которое должен произойти переход.
Transition-timing-function
Определяет, как вычислены промежуточные значения перехода.
Transition-delay
Определяет, когда переход запускается.
В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров . Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.
Давайте посмотрим, как применить простой переход к ссылке:
a {
color: #000;
transition-property: color;
transition-duration: 0.7s;
transition-timing-function: ease-in;
transition-delay: 0.3s;
}
a:hover {
color: #fff;
}
Присваивая анимацию элементу, вы можете также использовать сокращеную форму:
a {
color: #000;
transition: color 0.7s ease-in 0.3s;
}
a:hover {
color: #fff;
}
В отличие от CSS-переходов, анимация по ключевым кадрам в настоящее время поддерживается только в WebKit-браузерах, Firefox, а также в скором времени и в IE 10. Неподдерживаемые браузеры просто проигнорируют код анимации.
У свойства анимации есть восемь подсвойств:
Animation-delay
Определяет, когда анимация запускается.
Animation-direction
Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.
Animation-duration
Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.
Animation-iteration-count
Определяет количество циклов анимации перед остановкой.
Animation-name
Определяет имя правила в @keyframes.
Animation-play-state
Определяет, проигрывается ли анимация или приостановлена.
Animation-fill-mode
Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.
Давайте посмотрим, как применить простую анимацию к блоку:
/* Элемент, к которому мы применяем анимацию. */
div {
animation-name: move;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 2;
animation-direction: alternate;
-moz-animation-name: move;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-delay: 0.5s;
-moz-animation-iteration-count: 2;
-moz-animation-direction: alternate;
-webkit-animation-name: move;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 0.5s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
/* Код самой анимации. */
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
@-moz-keyframes move {
from {
-moz-transform: translateX(0);
}
to {
-moz-transform: translateX(100px);
}
}
@-webkit-keyframes move {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(100px);
}
}
Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:
div {
animation: move 1s ease-in-out 0.5s 2 alternate;
-moz-animation: move 1s ease-in-out 0.5s 2 alternate;
-webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
}
/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточным кадром */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }
У W3C есть много полезной и подробной информации про “CSS3-анимацию ”
Базовая структура нашего слайдера Теперь, когда мы знаем, как функционируют переходы и анимация, давайте посмотрим, как создать наш слайдер, используя только CSS3. Этот эскиз показывает, как анимация должна работать:
Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
Анимация очень проста: изображение следует по заданному направлению, изменяя свойства " top ", " z-index " и " opacity ".
Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.
-
Cougar
-
Lions
-
Snowalker
-
Howling
-
Sunbathing
Div id="slider"
Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.
Div id="mask"
Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.
Li id="first" class="firstanimation"
У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.
Div class="tooltip"
Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.
Div class="progress-bar"
Этот блок содержит функцию, которая показывает прогресс выполнения анимации.
Теперь пришло время к формированию CSS-файла.
3. Стили CSS Давайте создадим базовую структуру слайдера. У него будет тот же размер, что у изображения. Свойство границы будет полезно для создания рамки вокруг изображения./* Структура слайдера */ #slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }
Класс " mask " скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.
/* Прячем все за пределами слайдера */ #mask { overflow: hidden; height: 320px; }
Наконец, чтобы отсортировать список изображений, будем использовать " position: absolute " и " top: -325px " так, чтобы все изображения были расположены за пределами слайдера.
/* Список изображений */ #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Высота изображения */ position: absolute; top: -325px; /* Исходное положение (за пределами слайдера) */ list-style: none; }
Этими немногими строками кода, мы сделали разметку слайдера. Теперь мы просто должны добавить анимацию.
4. CSS3-анимация по ключевым кадрам
Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
Определяем общее количество изображений, в слайдере: 5
;
Определяем продолжительность анимации для каждого изображения: 5 секунд
;
Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд
;
Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4%
,
В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.
Со всей этой математикой мы можем теперь применить CSS-анимацию к слайдеру. Мы можем поместить анимацию в бесконечный цикл, т.к. для каждого изображения будет задана отдельная анимация, не зависящая от остальных изображений.
#slider li.firstanimation { animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; }
Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
Я добавил свойства " opacity " и " z-index ", чтобы сделать переход от одного изображения к следующему более привлекательным.
Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.
Вот весь код для анимаций:
/* Анимация */
@keyframes cycle {
0% { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */
4% { top: 0px; } /* Стартовая позиция */
16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
20% { top: 325px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
21% { top: -325px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
0% { top: -325px; opacity: 0; } /* Исходная позиция за пределами маски */
16% { top: -325px; opacity: 0; }/* Начало движения с 16% */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /* С 20% до 24% (в течении 1 секунды) - вход*/
36% { top: 0px; opacity: 1; z-index: 0; } /* С 24% до 36 % (3 секунды) изображение видимо */
40% { top: 325px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)- выход */
41% { top: -325px; opacity: 0; z-index: -1; } /* Возврат на исходную позицию */
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 325px; opacity: 0; z-index: 0; }
61% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 325px; opacity: 0; z-index: 0; }
81% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}
Создав анимацию, мы должны добавить индикатор выполнения, чтобы вывести на экран продолжительность каждой анимации.
Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:
/* Индикатор выполнения */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }
Не бойтесь синтаксиса. Тут есть такая же функция как «from to». Вы можете увидеть, что ключевые кадры устанавливают появление и исчезновение каждого изображения.
/* Строка состояния анимации */ @keyframes fullexpand { /* В этих ключевых кадрах анимация стационарна */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих - оживает */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих - плавно заполняется */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах индикатор выполнения завершил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }
Слайдер более или менее завершен. Давайте добавим несколько деталей, чтобы сделать его более функциональным. Мы вставим всплывающие подсказки для заголовков изображений, которые будут видимы при наведении курсором.
Стили для подсказок:
#slider .tooltip {
background: rgba(0,0,0,0.7);
width: 300px;
height: 60px;
position: relative;
bottom: 75px;
left: -320px;
}
#slider .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 10px;
}
Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.
7. CSS3-переходы
Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок.
Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.
#slider .tooltip { … transition: all 0.3s ease-in-out; } #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip { left: 0px; }
8. Пауза и рестарт
Чтобы позволить пользователям остановить слайдер, для просмотра содержиого, мы должны останавливать анимацию, при наведении курсором. Также мы должны будем остановить анимацию индикатора выполнения.
#slider: hover li, #slider: hover .progress-bar { animation-play-state: paused; }
9. Демонстрация Наконец, мы дошли до конца урока. Слайдер теперь готов на 100%!(). Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и iPad. Можете также загрузить архив ().
Спасибо Massimo Righi за его изображения.10. Заключение Эффект внушителен, но по общему признанию, этот слайдер не очень универсален. Например, чтобы добавить больше изображений, необходимо отредактировать все ключевые кадры. У CSS3 есть большой потенциал, но у него действительно есть пределы, и иногда JavaScript более предпочтителен, в зависимости от целевой аудитории.
У этого слайдера есть некоторые интересные функции, такие как пауза (при наведении) и уникальные ссылки для изображений, которые позволяют пользователям взаимодействовать со слайдером. Если необходима полная поддержка всеми браузерами, то использование CSS3 не возможно, таким образом, рекомендуется JavaScript. К сожалению, у CSS3-анимации есть много ограничений. На данный момент, из-за нехватки гибкости, мы не имеем возможности широкого использования. Надеюсь, эта статья будет стимулировать вас к дальнейшему изучению CSS3.
Не стесняйтесь делиться мыслями в комментариях.
От переводчика:
Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.
Теги: Добавить метки
HTML слайд шоу из фотографий легко добавит блеска вашей странице и вы получите внимание как посетителей, так и поисковых систем. Cincopa предлагает вам несколько потрясающих и быстро настраиваемых скинов, которые позволят показать многочисленные фотографии или видео на относительно небольшом пространстве и без использования квоты сервера, благодаря бесплатному хостингу и доставке (пакет которого может быть увеличен за определенную оплату). Вся процедура создания и вставки слайд шоу HTML занимает несколько минут и очень легко завершается, даже если у вас нулевые знания в области программирования.
HTML слайдер из фотографий Cincopa является удивительно эффективным, надежным и привлекательным. Технические требования выполняются автоматически программой для создания слайд шоу, и все, что вам действительно нужно сделать, чтобы создать слайд шоу HTML, просто загрузить высококачественные мультимедийные файлы. Эти файлы могут быть загружены с любого из ваших устройств или из социальных сетей, таких как Facebook или Instagram.
СКИНЫ HTML СЛАЙД ШОУ от Cincopa Как это работает1 Выбери один из наших удивительных скинов
2 Загрузи свои файлы на,облако” Cincopa
3 Получи простой код и вставь на своем сайте
ВЫБЕРИ СКИН HTML СЛАЙД-ШОУВыберите один из слайд-шоу HTML поддерживаемых скинов и настройте такие параметры как панель управления расположений, контроль местоположения, вид Cooliris, перетасование, авто-прогрывание и т.д.; затем, просматрите скин в отдельном окне. Обязательно попробуйте ряд скинов, прежде чем принять решение.
ЗАГРУЗИ МЕДИА ФАЙЛЫВы можете загрузить столько файлов, сколько вы хотите с вашего рабочего стола, портативных устройств или непосредственно из веб-камеры, а также из любого внешнего веб-источника. Организуйте ваши файлы на,облаке” Cincopa; Cincopa позаботиться о преобразование ваших фотографий, изменение размера и других адаптаций. Дизайн HTML слайд-шоу может быть изменен позже из любого вашего устройства.
ВСТАВЬ СГЕНЕРИРОВАННЫЙ КОДПростой пошаговый интерфейс Cincopa предложит вам выбрать способ; это означает, что если вы управляете сайтом на основе HTML вы должны выбрать вариант “слайд-шоу HTML”. Скопируйте строку кода, созданную с помощью приложения и вставьте его в любом месте на вашем сайте.
Зачем пользоваться программой для создания HTML слайд шоу Cincopa?Cincopa предоставляет Вам эксклюзивные, богатые медиа продукции и услуги пакета, которые были разработаны, чтобы ответить на любые возможные требования, которые возможно у вас есть от HTML слайдера для сайта. У программы для создания слайд шоу есть простой пошаговый интерфейс, который проведет вас через процедуру создания и управления, через программное обеспечение высокого класса и через выделенные сервера, которые обеспечивают надежную, плавную и быструю производительность и прогрессивную систему безопасности, гарантирующую что ваши файлы полностью защищены.
Cincopa позволяет делать творческие решения, но освобождает вас от всех технических проблем. Вы можете загружать неограниченное количество файлов практически из любого источника и отображать слайд-шоу HTML в любом количестве сайтов и социальных каналов.
ОСНОВНЫЕ ХАРАКТЕРИСТИКИ СЛАЙД-ШОУ HTML:Вероятно, что вы уже слышали о новом элементе HTML5 canvas . Это специальный элемент, который позволяет создавать и модифицировать графику. К тому же, мы можем использовать его как любой другой элемент на странице - применять анимации jQuery для него, обрабатывать события для него и интегрировать его в шаблон.
Обычно использование элемента canvas ограничивается играми и концептуальными демонстрациями. В данном уроке мы будем использовать его практично - сделаем слайдшоу с отличным эффектом перехода, которое будет работать и в старых браузерах.
С помощью JavaScript сделаем специальный фильтр для каждого изображения в слайдшоу. Мы будем создавать новую версию изображения с более высоким контрастом и более яркими цветам, и сохранять ее в элементе canvas.
Когда пользователь хочет перейти к следующему слайду, элемент canvas выводится на экран с помощью анимации fadeIn , создавая плавный эффект перехода.
HTMLНачнем с создания разметки HTML.
html5-slideshow.htmlСлайд шоу на основе элемента HTML5 сanvas и jQuery | Демонстрация для сайта сайт
Разметка для слайдшоу очень проста. Основной элемент div #slideshow содержит неупорядоченный список и стрелки на следующий и предыдущий слайды. Неупорядоченный список содержит слайды, которые определены как элементы li . На иллюстрации выше показано, что элемент canvas с модифицированным изображением будет вставляться сюда.
В конце включаются jQuery и наш файл script.js , который будет разбираться позже в данном уроке.
CSSВсе стили для слайдшоу содержатся в файле styles.css . Мы используем id основного элемента #slideshow в качестве определения пространства имен, поэтому можно просто добавить данные стили к вашему проекту без риска конфликта имен.
styles.css#slideshow{ background-color:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideshow ul{ height:320px; left:10px; list-style:none outside none; overflow:hidden; position:absolute; top:10px; width:620px; } #slideshow li{ position:absolute; display:none; z-index:10; } #slideshow li:first-child{ display:block; z-index:1000; } #slideshow .slideActive{ z-index:1000; } #slideshow canvas{ display:none; position:absolute; z-index:100; } #slideshow .arrow{ height:86px; width:60px; position:absolute; background:url("img/arrows.png") no-repeat; top:50%; margin-top:-43px; cursor:pointer; z-index:5000; } #slideshow .previous{ background-position:left top;left:0;} #slideshow .previous:hover{ background-position:left bottom;} #slideshow .next{ background-position:right top;right:0;} #slideshow .next:hover{ background-position:right bottom;}
Мы можем разделить наших посетителей, которые будут взаимодействовать со слайдшоу, на три группы:
- Те, у кого отключен JavaScript . Такие пользователи будут видеть только первый слайд, у них не будет возможности переключиться на другие слайды.
- Те, у кого включен JavaScript, но отсутствует поддержка элемента canvas . Для таких посетителей слайды будут переключаться мгновенно без эффекта перехода.
- Те, у кого включена поддержка JavaScript и поддерживается элемент canvas . Эта группа использует последние версии Firefox, Safari, Chrome, Opera. Они будут видеть слайдшоу во всей красе.
Правила разработаны с учетом первых двух групп. С помощью селектора first-child будет выводиться только первый слайд по умолчанию.
Базовый принцип действия слайдшоу мы уже разобрали. Теперь рассмотрим практическую реализацию.
script.js - Часть 1$(window).load(function(){ // Мы используем событие window.load, поэтому уверены, что // изображения слайдшоу загружены без ошибок. // Проверяем, поддерживает ли текущий браузер элемент canvas: var supportCanvas = "getContext" in document.createElement("canvas"); // Манипуляции с элементом canvas создают интенсивную нагрузку на процессор, // поэтому мы используем setTimeout, чтобы сделать работу асинхронной и улучшить // время отклика страницы var slides = $("#slideshow li"), current = 0, slideshow = {width:0,height:0}; setTimeout(function(){ window.console && window.console.time && console.time("Сгенерировано за:"); if(supportCanvas){ $("#slideshow img").each(function(){ if(!slideshow.width){ // Получаем размеры первого изображения: slideshow.width = this.width; slideshow.height = this.height; } // Выводим модифицированную версию изображения createCanvasOverlay(this); }); } window.console && window.console.timeEnd && console.timeEnd("Сгенерировано за:"); $("#slideshow .arrow").click(function(){ var li = slides.eq(current), canvas = li.find("canvas"), nextIndex = 0; // В зависимости от того, какая стрелка была нажата, // вычисляем индекс следующего слайда if($(this).hasClass("next")){ nextIndex = current >= slides.length-1 ? 0: current+1; } else { nextIndex = current