Главная / Проблемы / Создать слайд шоу используя javascript шаблоны. Эффектное слайд-шоу на JavaScript

Создать слайд шоу используя javascript шаблоны. Эффектное слайд-шоу на JavaScript

Слайд-шоу для сайта

Создать и добавить на сайт слайд-шоу обязательно должен уметь каждый веб-мастер. Использование слайдеров чрезвычайно популярно, и их можно встретить, практически, на любом современном ресурсе.

И это не случайно!

Если Вы были на странице «Анимация» , то видели там работу GIF -анимации.
Здорово, конечно! И создаётся довольно просто — в фотошоп. Только у неё есть существенный недостаток, который очень ограничивает её применение на сайтах. Малоцветность .

Такого недостатка полностью лишено слайд-шоу !

Именно поэтому, для размещения на сайте различных многоцветных рисунков, фотографий, лучше всего воспользоваться не анимацией, а слайд-шоу.

Только в этом случае, применения столь любезных моему сердцу простых HTML+CSS, уже будет недостаточно. Нужно подключать скрипты … … !

Создание слайд-шоу на сайте

Самое оптимальное решение — использовать jQuery .
На страницах БОЛЬШОГО СДВОЕННОГО раздела, посвящённого этой замечательной технологии: «jQuery» , есть много примеров её использования. Не буду повторяться.

Здесь применил jQuery для создания слайд-шоу на своём сайте, или, так называемого, слайдера . Его работу Вы видите сейчас ниже, а под ним подробно написал, что делал для создания такого вида слайдера, и показал ещё 7(!) действующих слайдеров.

Как видите, этот слайдер работает исправно! Впрочем, и все остальные тоже. Можете сами убедиться. => смотреть сразу

**Примечание. В отличие от других страниц раздела jQuery , нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
Кроме того, что очень важно(!), они работают у меня от другой версии jQuery, более поздней, чем использую здесь.

Если там использую версию jquery v.1.10.1.min , то здесь v.1.8.3.min

Однако, подробнее об этом и обо всём остальном, по-порядку — дальше.

Подготовка слайд-шоу

Работа по созданию и установке слайд-шоу на сайте обычно состоит из 4-ёх основных этапов.

Подготовка изображений для слайдера

1. Подобрал фотографии. Главное — чтобы они были обязательно одного размера . Нужно их тщательно измерить.
В данном случае, взял готовые картинки из дополнительных материалов, приложенных к обучающему курсу. Какому? Об этом здесь: «Ссылки» (откроется в новом окне).

2. Нарисовал в фотошоп графическое изображение слайдера в стиле «телевизор» . Пусть не оригинально, зато очень удобно.
Главное — размер просмотровой зоны нужен немного больше по ширине и высоте, чем у подготовленных рисунков.

Создание HTML+CSS каркаса для слайд-шоу

Картинки прописываются в HTML-коде именно в то место , где они в дальнейшем будут выводиться. Срипты же, можно прописать потом в любое удобное место. Я обычно оставляю место для них сразу под рисунками. Структура логичнее.

Разместил сами изображения внутри тэга p , для которого установил в стилях CSS ширину и высоту, и указал его class=»slideshow» . А сам абзац с ними поместил внутрь общего тэга div , на фон которого повесил подготовленное графическое изображение слайдера (телевизор* ). Ему дал class=»slider_fon» .
Причём, только для него , чтоб разгрузить страницу, подключил внешнюю таблицу стилей, а для рисунков всё делал внутри HTML-кода .

P.S.** Последнее действие вовсе НЕ обязательно. Просто, мне так удобнее. Структура страницы логичнее как-то выглядит.

В правилах CSS указал размер окна для изображений, которые потом будут появляться в слайдере (width — height ) . Естественно, у всех изображений должен быть одинаковый размер .
При желании, мог расширить CSS-параметры, добавив, скажем, рамки, фон, отступы и прочие элементы. Однако, думаю, это уже было бы лишним.

Если же, всё-таки, Вам захочется так сделать, то, размеры указывайте ОБЩИЕ, то есть: изображение + ВСЕ установленные отступы и границы.

Подключение скриптов

Рекомендую посетить справочную страницу, которую делал для себя во время изучения технологии jQuery. Очень поможет Вам разобраться.
Открыл к ней общий доступ: «ВЫБОРКА в jQuery» (откроется в новом окне).

Как всегда, сначала создал папку js на сайте. Затем скачал нужные скрипты для слайд-шоу (архив ), и распаковал его в эту папку. В ней получилось два файла скриптов: ядро jquery-1.8.3.min.js и плагин jquery.cycle.all.min.js .

В неё же, на всякий случай, добавил и свой управляющий файл myscripts11.js . Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.
Но … …, пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, «… наш бронепоезд всегда на запасном пути» .

Дальше. Внутрь тэга … вставил строчки, где прописал пути к скриптам..jpg» type=»text/javascript»>, и к плагину: .
Свой («запасной») управляющий файл закомментировал .

— и последнее —

Зашедшие на мой сайт с отключённым в браузере интерпретатором JavaScript , наблюдать слайд-шоу , разумеется, не смогут.
Они увидят рисунки так, как те прописаны в HTML-коде , т.е. в столбик, друг за другом.
Для них сделал строчку-предупреждение и вставил её в тэг … .

Ну вот! Слайд-шоу создано. Осталось настроить его параметры: скорость смены рисунков, способы их показа, и т.д..

Настройка параметров слайд-шоу

Как уже писал выше, (в примечании** ), нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
В созданном у себя на сайте слайд-шоу, применил настройки «по умолчанию» .

Вообще же, легко установить различные, интересные типы переходов между картинками, изменяя javascript , размещённый в теле страницы.
Скажем, изменив в скрипте строчку sync: false на sync: true , можно убрать пробел при смене изображений.

Важное замечание!
Разные версии jQuery могут конфликтовать друг с другом, если они на одной странице.
Обязательно(!) проверяйте работу плагинов с установленной версией jQuery , поскольку не все версии сочетаются!

Пример**
На других страницах раздела jQuery , использующих библиотеку, установлена версия jquery v.1.10.1.min . Так вот, она более современная, чем v.1.8.3.min , от которой исправно(!) работают слайдеры слайд-шоу здесь.

Плагин jquery.cycle.all.min.js с ней НЕ РАБОТАЕТ!!!
(проверено )

Впрочем, не огорчайтесь. Всё в Ваших руках!
В разделе моего сайта «Полезное» (откроется в новом окне) найдёте испытанный(!) полный комплект нужных скриптов для создания такого слайд-шоу на своём сайте. (Разумеется, БЕСПЛАТНО!)

Другие виды слайд-шоу

Не буду в этом подразделе столь подробно описывать все действия по созданию слайд-шоу. В принципе, они абсолютно одинаковые.
Даже проще. Не нужно рисовать фоновую картинку слайдера в фотошоп. Даже отдельная таблица стилей CSS не понадобится.

Если хотите разместить различные варианты слайд-шоу на одной странице сайта, как я это сделал здесь (увидите ниже ), указывайте разные классы для каждого варианта в строчке скрипта $(‘.slideshow ‘).cycle({

P.S.* Не забудьте прописать в CSSразмеры окна для каждого класса , если, всё же, будете использовать таблицу стилей. Мне она не понадобилась.

Посмотрите сначала на неподвижные рисунки, которые, аналогично, взял из обучающего курса (Какого? Повторю ссылку: «Ссылки» ), и разместил их здесь для сравнения.

Вот они. Будущие участники 7-ми слайд-шоу!
Смотрите их «выступление» ниже.

Покажу несколько популярных видов слайдеров. Вставил их, для удобства просмотра, в общую таблицу.
Слева — название эффекта и краткое пояснение, если нужно. Справа — пример.

Надеюсь, показанное «групповое» слайд-шоу Вам понравилось.
Действительно, удобно! «Танцуют» домики — каждый в своей ячейке, и никому не мешают. Не зря я им +5 за «выступление» поставил!

А серьёзно — такой способ создания слайд-шоу для сайта экономит огромное количество места на странице.
Поэтому, повторю сказанное в начале раздела.
Самое оптимальное решение для создания разных шоу на сайте — использовать jQuery .

Посмотреть практическое применение слайдеров для дизайна страниц ресурса, можете на специально созданном мною сайте-визитке «Личная страничка» .

Можно ли сделать что-либо подобное БЕЗ подключения скриптов?
Конечно можно! Об этом читайте дальше.

Слайд-шоу только на HTML

Как создать простой слайдер на сайте, чтобы НЕ применять разные сложные и тяжёлые (по «весу») скрипты? Легко!
Не я был бы, если б не показал Вам такие интересные и простые способы!

Воспользуемся для этого базовыми технологиями интернета => HTML + CSS .

Базовые — означает такие, без которых интернет невозможен вообще, в принципе!

Впрочем, сначала посмотрите простые слайд-шоу, созданные только на языке HTML , без использования каких-либо скриптов.
Специально для этого сделал отдельную небольшую страницу.

После уже сами сможете решить, что больше подходит Вашему ресурсу.

Заключение

Надеюсь, размещённая информация о том, как можно просто создать слайд-шоу для сайта, была Вам интересна.
Заодно, и для своего «Портфолио» разместил вполне достаточно материала по этой увлекательной теме.

Посетителям, кому нужно создать слайд-шоу, либо галерею на сайте, подключить аудио и видео к нёму, но нет времени самостоятельно заниматься этим, способен помочь раздел «Выбор исполнителя» (откроется в новом окне).

Сделал прямой заход на эту страницу из трёх БОЛЬШИХ разделов. Вернуться также можно прямо. Наведите курсор мыши на стрелки — появятся подсказки, куда они ведут.
Кликнув по верхнему логотипу , попадёте на «Главную».

Простой, легкий (21Кб в сжатом виде) слайдер, написанный на чистом Javascript, не имеющий никаких зависимостей, т.е.

Программа для создания слайд-шоу на HTML5

работает без jQuery.

Протестирован в следующих браузерах:

Chrome 26.0
Firefox 20.0
Safari 5.1.7
IE 10
Opera 16.0

Есть неполная поддержа IE8/9 (нет эффектов).

GitHub | Демо

Особенности

Вы можете добавить на страницу неограниченное количество слайдеров, даже разместить один в другом.
Изменяет размеры с зависимости от содержимого, но можно и запретить.
Навигация с помощью клавиатуры — когда курсор находится на слайдере, можно переключать слайдеры с стрелками.
Поддержка мобильных touch событий.

Подключение

Перед закрывающимся тегом необходимо подключить slidr.js или slidr.min.js файл.

HTML разметка

slidr.js может работать с любыми, элементами, имеющими аттрибут. Допускается использовать любые дочерние элементы первого уровня с атрибутом, например:

Javascript

После подключения slidr.js станет доступен глобальный объект. Самый простой способ создания:

Вызов с заданием всех настроек:

Настройки

Все доступные настройки для slidr.js приведены в таблице ниже.

Параметр Тип По умолч. Description

function	callback-функция после смены слайда
function	callback-функция до смены слайда
bool	false	Показать хлебные крошки для управления слайдами. или.
string	border	Расположение стрелок для управления слайдами. , or.
string	horizontal	Направление по умолчанию для новых слайдов. или, или.
bool	true	Включить эффект затемнения для смены слайдов (fade-in/out). или.
bool	false	Включить смену сладов с помощью клавиатуры. или.
bool	false	Включить overflow для блока со слайдером. или.
bool	false	Не менять слайды автоматически при наведении мыши (необходимо запустить auto()). или.
string	#fff	Цвет элементов управления слайдером (хлебных крошек и стрелок). или.
object	{}	Custom animation timings to apply. .
bool	false	Задействовать touch управление на мобильных устройствах. или.
string	linear	Эффект смены слайдов. , или.

Функции обратного вызова и получают следующие данные:

Slider.js global API

Глобальное пространство имен slidr предоставляет следующие функции:

Slider API

Короткая запись

Полный список функци API Slidr.js представлен ниже

Скрол страницы во время смены слайдов

В некоторых браузерах появляется этот неприятный баг. Чтобы исправить его нужно добавить стиль к:

Динамическое изменение размера

Slidr сам "понимает", нужно ли изменять размеры слайдера под изображение. Если у блока слайдера указаны размеры, то Slidr не будет автоматически их менять. Если указаны свойства min-width и min-height, то слайдер будет менять свой размер под контент, учитывая эти значения. В противном случае определение размеров будет проходить в автоматическом режиме.

Автоматическое изменение размеров

Статические размеры

Элементы управления Slidr

Разметка элементов управления следующая:

Вы можете кастомизировать любой элемент управления слайдером с помощью CSS селекторов:

Элемент управления "стрелка" реализован с помощью псевдоселектора, поэтому, чтобы его скрыть, используйте следующий код:

Хлебные крошки Slidr

Хлебные крошки имеют простую HTML разметку. Каждый обозначает всю строку, а каждый отдельную хлебную крошку:

Стилизация хлебных крошек с помощью CSS:

Лицензия

Это программное обеспечение может свободно использовать под лицензией MIT.

Теги: Javascript

Простой слайдер на чистом javascript

Слайдер на чистом javascript

Стенограмма видео

Вправо
Влево

#slider {position: relative; overflow: hidden; width: 600px; height: 320px; margin: 20px auto; padding: 0; list-style: none;}
.slide {position: absolute; width: 100%; height: 100%; transition: all 1s ease-in 0.1s; left:0;}
.slide img {width: 100%;}
.arrows {position: relative; margin: 0 auto; width: 600px;}
.arrow {position: absolute; cursor: pointer;}
.no_active {color: red;}
.next {right: 0;}

Скрипт js:

var next = document.getElementById(‘next’);
var prew = document.getElementById(‘prew’);

var slides = document.getElementsByClassName(‘slide’);
for(var i=0; i

Возврат к списку

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения.

Фотолаборатория

Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Приветствую вас дорогие друзья!

101 слайдер и слайдшоу для сайта на Jquery CSS — шикарно, просто шикарно!

В этом небольшом уроке я покажу, как можно наиболее простым способом создать слайд-шоу!

Слайд-шоу – это галерея на javascript, в которой изображения меняются автоматически через определенный промежуток времени.

В нашей галерее, при смене изображения, мы будет использовать небольшой эффект, а именно – изменение прозрачности картинки!

Простой Html код:

Здесь все очень просто – в блок с классом slideshow помещаем изображение, которое будет первым.

А вот, собственно, и стили вышеупомянутого класса:

Задаем ширину и выравниваем блок по центру.

Теперь подробнее рассмотрим и разберем javascript (Jquery) код:

Сначала описывается массив image_array, содержащий ссылки на изображения.

Если вам нужно добавить, удалить или изменить картинки галереи, то просто замените ссылки в этом массиве – больше ничего изменяться не нужно!

Переменная image_num используется в качестве счетчика картинок. Когда мы доходим до последней картинки массива, мы обнуляем эту переменную, чтобы снова начать показ с первой картинки (делаем зацикливание).

берем картинку из блока с классом slideshow;

делаем её на 40% прозрачной (это происходит за 500 миллисекунд);

после этого меняем атрибут src у картинки (меняем ссылку на картинку, взяв её из массива image_array);

далее делаем картинку непрозрачной (это тоже происходит за 500 миллисекунд).

Как я уже говорил, переменная image_num – это счетчик, его мы сравниваем с длиной массива (то есть с количеством картинок участвующих в слайд шоу) и если image_num равен максимальному значению, то обнуляем его.

Функция slide запускается каждые 3 секунды (3000 миллисекунд) с помощью интервала (setInterval), это значит, что картинки будут перелистываться каждые 3 секунды.

Как видите, ничего сложного нет!

На этом данный урок по javascript подошел к завершению, теперь можете взглянуть на demo пример, а также сказать исходный файл урока.

На этом все, до новых уроков, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Обзор программ создания слайд-шоу Создание слайд-шоу для сайта

При создании слайд-шоу для размещения на сайте лучше всего воспользоваться готовыми программными решениями. На мой взгляд, оптимальный и самый простой вариант - использование jQuery, специальной бесплатной библиотеки скриптов (небольших программ на JavaScript ). В предыдущих статьях уже рассказывалось об этом замечательном инструменте веб-разработки. Например, смотрите статью Фотогалерея jQuery - просто и красиво! . Теперь применим jQuery для создания слайд-шоу на сайте, так называемого, слайдера.

Для этого воспользуемся плагином Slides , созданным программистом Натаном Салесом (Nathan Searles), техническим директором дизайн-студии "Бригада" ("The Brigade") в Портланде, штат Орегон, США. О другой его разработке рассказывалось в статье Фотогалерея для интернет магазина.

Плагин Slides - простой в установке, имеет несколько вариантов смены картинок в слайд-шоу и часто используется для шапки сайта. Пример работы этого слайдера с настройками по умолчанию показан на рисунке:

Установка слайд-шоу Slides

Как всегда, сначала создаем папку scripts на сайте. Затем надо скачать архив и распаковать его в созданную папку. В ней получится два скрипта jquery-1.8.3.min.js и jquery.cycle.all.min.js .

Далее, в заголовок страницы внутри тега ... вставляем следующие строчки, где указан путь к скриптам и небольшой javascript , определяющий параметры слайд-шоу:

$(".slideshow").cycle({
fx: "fade"
});
});

.slideshow {
width: 200px;
height: 135px;
margin: auto;
}

Как видим, здесь есть и простое правило CSS, в котором необходимо указать размер окна для изображений будущего слайд-шоу (ширина - высота). Естественно, все изображения должны иметь одинаковый размер. При желании вы можете расширить CSS-параметры, добавив, к примеру, границы, фон, отступы и другие элементы для изображений слайд-шоу. При этом размер надо указывать общий, то есть изображение плюс установленные вами отступы и границы по длине и ширине.

Важное замечание: если на вашем сайте используется несколько плагинов jQuery , то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:

Не рекомендуется использовать на одной странице несколько разных версий jQuery , чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery , так как не все версии взаимозаменяемы.

Последний шаг - размещение изображений на странице. Здесь также всё просто. Размещаете изображения внутри тега или другого, для которого допустимо устанавливать ширину и высоту, и указываете его class="slideshow" . Для нашего примера HTML-код слайдера выглядит следующим образом:

На этом создание слайд-шоу почти закончено, и вы можете посмотреть его, открыв свою страницу в браузере.

Настройка параметров слайд-шоу Slides

В созданном слайд-шоу можно устанавливать разные виды переходов между кадрами, изменяя javascript , размещенный в заголовке страницы. Кроме того, заменив в скрипте строчку sync:false на sync:true , можно убирать пробел при смене изображений.

Длительность показа изображений регулируется параметром timeout , а скорость - параметром speed . Для примера привожу несколько распространенных вариантов слайд-шоу и соответствующие им скрипты, которые следует вставить в заголовок страницы.

1. Растворение (наш пример): $(document).ready(function() { $(".slideshow").cycle({ fx: "fade", //вид перехода speed: 1000 , //скорость смены картинки timeout: 1000 //длительность кадра }); });
2. Перетасовывание: $(document).ready(function() { $(".slideshow").cycle({ fx: "shuffle", sync: false, speed: 500 , timeout: 5000 }); });
3. Зум: $(document).ready(function() { $(".slideshow").cycle({ fx: "zoom", sync: false }); });
4. Переворот по оси X или Y: $(document).ready(function() { $(".slideshow").cycle({ fx: "curtainX", // для поворота по оси Y - curtainY sync: false }); });
5. Сворачивание по вертикали: $(document).ready(function() { $(".slideshow").cycle({ fx: "turnDown", // направление можно задать turnUp, turnLeft, turnRight sync: true }); });
6. Скроллинг (смещение): $(document).ready(function() { $(".slideshow").cycle({ fx:"scrollDown", // направление смещения можно задать scrollUp, scrollLeft, scrollRight sync: true }); });
7. Наплыв справа: $(document).ready(function() { $(".slideshow").cycle({ fx: "cover }); });

Иногда нужно разместить несколько вариантов слайд-шоу на одной странице сайта, как это сделано в данной статье. Для этого надо просто указывать разные классы для каждого варианта в строчке $(".slideshow").cycle({ (смотрите код в таблице выше), и не забудьте прописать в CSS размеры окна для каждого класса.

Скрипт, с помощью которого легко создать презентации нескольких изображений. Скрипт поддерживает большой набор эффектов и элементов цикла.

Presentation Cycle - вариация функционала Cycle. Вместо списка номеров слайдов, Presentation Cycle автоматически генерирует индикатор прогресса, который показывает время появления нового слайда.

Особенности

Циклический показ изображений.
Настраиваемое время анимации.
Генерация индикатора навигации, который отображает время показа слайда.
Работает в современных браузерах.

Как использовать скрипт

Подключаем к странице все необходимые библиотеки и скрипты:

Создаем контейнер, который содержит элементы для Cycle:

Заголовок

Контейнер с элементами цикла имеет id “presentation_container ”, что соответствует использованию установок по умолчанию в скрипте и таблице стилей. Вложенные элементы имеют класс “pc_item ”, что также соответствует использованию установок по умолчанию.

После контейнера вставляем вызов скрипта:

presentationCycle.init();

Для запуска скрипта с установками по умолчанию описанных действий достаточно.

Настройки

Сначала разберемся, как настраивать изображения, которые используются для генерации индикатора прогресса.

Код Javascript в файле presentationCycle.js содержит следующую секцию, касающуюся изображений, используемых скриптом (строка 19 ):

// Опции индикатора прогресса barHeight: 14, // Высота полоски индикатора barDisplacement: 20, // Смещение индикатора barImgLeft: "images/pc_item_left.gif", // Изображение для левой части barImgRight: "images/pc_item_right.gif", // Изображение для правой части barImgCenter: "images/pc_item_center.gif", // Изображение для центральной части barImgBarEmpty: "images/pc_bar_empty.gif", // Изображение для пустой полоски barImgBarFull: "images/pc_bar_full.gif", // Изображение для заполненной полоски

Высота полоски определяется в пикселях. Она должна быть такой же как и высота изображений, которые хранятся в папке images . Изображения являются спрайтами, которые включают в себя версии для активного и пассивного состояния.

Для выравнивания изображений нужно сделать два одинаковых квадрата расположенных рядом. Левая часть используется для пассивного состояния, а правая - для активного состояния.

Нужно, чтобы все изображения имели одинаковую высоту, которая соответствует высоте полоски индикатора.

Cмещение индикатора barDisplacement комбинируется из отступа + поле полоски.

Для использования пользовательских настроек можно задействовать следующий код вызова плагина, который снимает необходимость вносить правки в текст JavaScript файла:

PresentationCycle.barHeight = 10; // Отличные от установок по умолчанию значения presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; presentationCycle.init(); // Запускаем скрипт

Для настроек параметров цикла, используются следующие установки:

// Опции слайдов slideTimeout: 8000, containerId: "presentation_container", //Опции цикла cycleFx: "scrollHorz", cycleSpeed: 600,

slideTimeout - время демонстрации слайда.
containerId - контейнер с элементами цикла.
cycleFx - эффект перехода между слайдами, используются плагина Cycle . cycleSpeed - скорость анимации перехода между слайдами.

Запретив использование JavaScript, Вы не сможете видеть интересные примеры слайд-шоу!

Слайд-шоу для сайта

И это не случайно!

**Примечание. В отличие от других страниц раздела jQuery , нужные скрипты прописал непосредственно в HTML-код самой этой страницы .
Кроме того, что очень важно(!) , они работают у меня от другой версии jQuery , более поздней, чем использую здесь.

Если там использую версию jquery v.1.10.1.min , то здесь v.1.8.3.min

Однако, подробнее об этом и обо всём остальном, по-порядку - дальше.

Подготовка слайд-шоу

Работа по созданию и установке слайд-шоу на сайте обычно состоит из 4-ёх основных этапов.

Подготовка изображений для слайдера

1. Подобрал фотографии. Главное - чтобы они были обязательно одного размера . Нужно их тщательно измерить.
В данном случае, взял готовые картинки из дополнительных материалов, приложенных к обучающему курсу. Какому? Об этом здесь: "Ссылки" (откроется в новом окне) .

2. Нарисовал в фотошоп графическое изображение слайдера в стиле "телевизор" . Пусть не оригинально, зато очень удобно.
Главное - размер просмотровой зоны нужен немного больше по ширине и высоте, чем у подготовленных рисунков.

Создание HTML+CSS каркаса для слайд-шоу

Разместил сами изображения внутри тэга p , для которого установил в стилях CSS ширину и высоту, и указал его class="slideshow" . А сам абзац с ними поместил внутрь общего тэга div , на фон которого повесил подготовленное графическое изображение слайдера (телевизор* ). Ему дал class="slider_fon" .
Причём, только для него , чтоб разгрузить страницу, подключил внешнюю таблицу стилей, а для рисунков всё делал внутри HTML-кода .

В правилах CSS указал размер окна для изображений, которые потом будут появляться в слайдере (width - height ) . Естественно, у всех изображений должен быть одинаковый размер .
При желании, мог расширить CSS-параметры , добавив, скажем, рамки, фон, отступы и прочие элементы. Однако, думаю, это уже было бы лишним.

Если же, всё-таки, Вам захочется так сделать, то, размеры указывайте ОБЩИЕ , то есть: изображение + ВСЕ установленные отступы и границы .

Подключение скриптов

Рекомендую посетить справочную страницу , которую делал для себя во время изучения технологии jQuery. Очень поможет Вам разобраться.
Открыл к ней общий доступ: "ВЫБОРКА в jQuery" (откроется в новом окне) .

В неё же, на всякий случай, добавил и свой управляющий файл myscripts11.js . Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.
Но... ..., пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, "... наш бронепоезд всегда на запасном пути" .

Дальше. Внутрь тэга ... вставил строчки, где прописал пути к скриптам. У меня они: , и к плагину: .
Свой ("запасной") управляющий файл закомментировал .

И последнее -

Зашедшие на мой сайт с отключённым в браузере интерпретатором JavaScript , наблюдать слайд-шоу , разумеется, не смогут .
Они увидят рисунки так, как те прописаны в HTML-коде , т.е. в столбик, друг за другом.
Для них сделал строчку-предупреждение и вставил её в тэг ... .

Настройка параметров слайд-шоу

Как уже писал выше, (в примечании** ), нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
В созданном у себя на сайте слайд-шоу, применил настройки "по умолчанию" .

Плагин jquery.cycle.all.min.js с ней НЕ РАБОТАЕТ!!!
(проверено )

Впрочем, не огорчайтесь. Всё в Ваших руках!
В разделе моего сайта "Полезное" (откроется в новом окне) найдёте испытанный(!) полный комплект нужных скриптов для создания такого слайд-шоу на своём сайте. (Разумеется, БЕСПЛАТНО!)

Другие виды слайд-шоу

P.S.* Не забудьте прописать в CSS размеры окна для каждого класса , если, всё же, будете использовать таблицу стилей . Мне она не понадобилась.

Посмотрите сначала на неподвижные рисунки, которые, аналогично, взял из обучающего курса (Какого? Повторю ссылку: "Ссылки" ) , и разместил их здесь для сравнения.

Вот они. Будущие участники 7-ми слайд-шоу!
Смотрите их "выступление" ниже.

Покажу несколько популярных видов слайдеров. Вставил их, для удобства просмотра, в общую таблицу.
Слева - название эффекта и краткое пояснение, если нужно. Справа - пример.

1. Растворение ("fade"): Аналогичен верхнему примеру с мотоциклами.
2. Перетасовывание ("shuffle"):
3. Зум ("zoom"):
4. Переворот по осям ("curtainX" или Y): Здесь установил "curtainX" .
5. Сворачивание по вертикали ("turnDown"): Здесь сворачивается вниз, а можно установить и другие виды переходов: turnUP, Left, Right .
6. Скроллинг ("scrollDown"): Смещение. Здесь установил вниз, а кроме этого можно устанавливать: scrollUp, Left, Right .

Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:

< div style = "position: relative; height:600px; width:800px;" >

< img style = id = "sh_back" src = "img/02.jpg" >

< img style = "position: absolute; top:0px;" id = "sh_front" src = "img/01.jpg" >

Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.

var op = 1 ; // Прозрачность

var img_front = 1 ; // Индекс отображаемой картинки

var img_back = 2 ; // Индекс фоновой картинки

var img_total = 10 ; // Общее количество картинок в ротации

// Функция изменения прозрачности отображаемой картинки

function fade () {

// Непрозрачность уменьшается

op -= 0.1 ;

if (op < 0 ) {

// Картинка непрозрачная

op = 1 ;

// Берем следующие картинки

img_front ++;

img_back ++;

// Если показали все, то переходим обратно на первую

if (img_front > img_total ) { img_front = 1 ; }

if (img_back > img_total ) { img_back = 1 ; }

// Установить новые картинки на фон и отображение

// Прозрачность для IE

tmp . style . filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)" ;

tmp . src = "img/" + img_front + ".jpg" ;

var tmp = document . getElementById ("sh_back" );

tmp . src = "img/" + img_back + ".jpg" ;

// Пауза между сменой картинок в 5 секунд

setTimeout ("waiting()" , 5000 );

else {

// Установить новое значение прозрачности для верхней картинки

var tmp = document . getElementById ("sh_front" );

// Прозрачность для браузеров

tmp . style . opacity = op ;

// Прозрачность для IE

tmp . style . filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" +

Math . round (op * 100 )+ ")" ;

// Следующая итерация цикла затухания

setTimeout ("fade()" , 50 );

// Функция запуска эффекта затухания

function waiting () {

fade ();

Код достаточно простой, но все-таки некоторые моменты требуют пояснений. Здесь подразумевается, что все картинки слайд-шоу имеют одинаковый размер, соответствующий размеру области слайд-шоу, находятся в папке "img" и упорядочены по именам, начиная с "1.jpg" до "10.jpg". В вашем проекте пути и имена файлов могут быть другими. Интервал задержки между сменой кадров задан жестко - 5000 миллисекунд или 5 секунд. Скорость одной итерации затухания - 50 миллисекунд. Эти значения можно уменьшить или увеличить по необходимости. Осталось только запустить слайд-шоу.

Создать слайд шоу используя javascript шаблоны. Эффектное слайд-шоу на JavaScript

Восстановление пароля