|
Главная Скачать (Download) Dreamweaver CS6 Dreamweaver CS5 Dreamweaver CS4 Dreamweaver 8 Dreamweaver MX 2004 - Рабочая область
Dreamweaver 4- Создание/ открытие документов - Настройка сайта - Компоновка страниц с CSS - Табличный контент - Шаблоны в MX 2004 - Работа с страницами - Настройка серверных приложений - Рабочая область для динамических страниц Уроки (Tutorials) Видеоуроки new!!! Fireworks ЧаВо Документация Статьи Программы и скрипты Бесплатные шаблоны Каталог сайтов Форум Карта сайта Контакты Аренда электростанция аренда электростанция. |
Слайд Шоу Если Вы web-дизайнер и Вам понадобилось сотворить череду изображений сменяющих друг друга при помощи какого-либо эффекта перехода, то здесь я позволю себе предложить Вам один из способов реализации этой затеи. Для реализации задуманного Вам потребуется: Ваши изображения (желательно одного размера) и любой текстовый редактор способный редактировать html-документы. Для примера возьмем четыре файла формата GIF и поименуем их slide_1.gif - slide_4.gif соответственно. Затем создайте файл index.html и откройте его в текстовом редакторе. Для начала нам понадобится тег <img>, в котором и будет происходить смена изображений. Свойству src этого тега присвоим имя первого файла в последовательности слайдов, а так же при помощи свойства id этот тег идентифицируется именем slaid. Для нашего примера это будет выглядеть следующим образом: <img src="slide_1.gif" id="slaid"> Теперь необходимо, при помощи CSS, указать какой фильтр будет использован для перехода между изображениями. В нашем случае это выглядит следующим образом: <style type="text/css"> img {filter: blendTrans(duration=3.0); } </style> Здесь видно, что для тега <img> устанавливается фильтр blendTrans (плавный переход) с параметром duration (продолжительность) равным трем секундам. Теперь можно переходить к непосредственному написанию сценария на языке JavaScript, который будет выполнять замену изображений. Для этого откроем тег: <scritp language="JavaScript" type="text/javascript" > Затем переменную типа массив длиной в четыре элемента: var img_array = new Array(4); Далее следует код, который отвечает за загрузку всех слайдов до начала слайд шоу: for (n=0;n<=3;n++) { img_array[n] = new Image(); next=n+1; img_array[n].src = "slide_"+next+".gif"; } Поскольку имена файлов, в которых хранятся изображения слайдов, отличаются только порядковым номером, то процесс их загрузки можно поместить в цикл for. В теле цикла первое выражение при помощи команды new Image() создает объект типа Image (изображение) и присваивает его текущему элементу массива. Затем следует выражение: next=n+1; Оно необходимо, так как элементы массива начинаются с нуля, а нумерация файлов начинается с единицы. Так как созданный ранее объект типа Image по своим свойствам полностью соответствует тегу <img>, то при помощи последнего выражения в теле цикла свойству src данного объекта присваивается имя соответствующего файла. После того как все изображения были загружены в оперативную память пользователя, можно приступать к реализации перехода между ними. Для этого напишем следующую функцию: i = 1; function doFilter() { slaid.filters[0].Apply(); slaid.src = img_array[i].src; slaid.filters[0].Play(); i = i+1; if (i == 4) i = 0 } Переменная i, объявленная перед функцией играет роль индекса элементов массива и по умолчанию имеет значение 1. Первое выражение в функции можно примерно перевести на русский язык следующим образом: “Вызвать метод Apply() нулевого фильтра для объекта изображения с именем slaid”. Этот метод “замораживает” видимое в данный момент изображение и позволяет изменить значение параметров перехода и самого изображения, не требуя немедленного применения перехода. Во второй строке свойству src объекта изображения присваивается значение свойства src текущего элемента массива объектов изображений загруженных ранее. В третьей строке для выполнения перехода используется метод Play(). Затем осуществляется переход к следующему элементу массива при помощи увеличения индекса массива на единицу. После чего индекс сравнивается с четверкой и если результатом сравнения будет true (истина), то индекс обнуляется. Теперь нам осталось только вызвать нашу функцию при помощи функции setInterval(). Для нашего примера это выглядит так: setInterval("doFilter()", 4000); Эта функция выполняет операцию или другую функцию, которая была передана ей первым параметром все время через промежуток равный второму параметру, который задается в миллисекундах. В нашем случае функция doFilter() будет выполнятся через четыре секунды. После этого не забудте закрыть тег <script>. И в завершении хотелось бы заметить, что в HTML 4.0 существует еще один фильтр перехода revalTrans, который позволяет осуществлять переходы между изображениями аж 24-я способами. А главное то, что это слайд шоу можно легко адаптировать для взаимодействия с другими частями вашего сайта, такими как кнопки, ссылки и остальные управляющие элементы. Автор: Тищенко В. А.
Реклама |
|
|