Голосование

Ваш опыт использования интернета?
 

Поиск по сайту

РЕКОМЕНДУЕМ

Полезное

Администрация

Администратор:

7111918

admin (dog) intellectservice.net

Технический отдел:

444447998

support (dog) intellectservice.net

Отдел продаж:

351771399

sales (dog) intellectservice.net

Наши атестаты

Здесь находится аттестат нашего WM идентификатора 295314898815

www.megastock.ru

Аудитория

 




Besucherzahler		 most beautiful Russian Brides
счетчик посещений

Rambler's Top100



 


Создаем слайд-шоу на JavaScript для сайта PDF Печать E-mail
Автор: Oleg Voloschuk   
22.08.2010 16:04

Приступаем к реализации.

Шаг 1.
Для начала нам понадобятся рисунки, которые будут включены в слайд-шоу. В примере мы будем использовать три рисунка. Подготавливаем изображения, одинаковые по размеру в формате GIF. Названия могут быть любые, мы назовем по порядку slide1, slide2, slide3. Если у Вас есть интересные рисунки разных размеров, Вы легко можете подогнать под одну величину в программе Photoshop или ACDSee.

В итоге у в корне нашего сайта должны лежать три рисунка slide1.gif, slide2.gif и slide3.gif. Размеры каждого изображения 450x281px.

Шаг 2. 
Далее нам необходимо выполнить предварительную загрузку рисунков. Так как мы используем JavaScript, и хотим, чтобы рисунки отображались без задержек, то прежде, чем отобразить рисунки, необходимо загрузить их в кэш.

 

<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="/slide1.gif"
var image2=new Image()
image2.src="/slide2.gif"
var image3=new Image()
image3.src="/slide3.gif"
//-->
</script>
</head>

 

Мы создали три экземпляра объекта Image (slide1.gif, slide2.gif и slide3.gif - наши изображения), каждый из которых ссылается на рисунок, составляющий слайд-шоу. Таким образом, рисунки загружаются в кэш и становятся доступными для отображения в любое время. Обратите внимание, что весь код включен в область <head>.

Шаг 3.
Добавим HTML код для отображения первого рисунка из слайд-шоу.


<body>
<img src="/slide1.gif" name="slide" width=450 height=281>
</body>

 

Обратите внимание, что мы задали значение атрибуту "name" нашего рисунка. Таким образом, с помощью JavaScript мы сможем манипулировать рисунком (slide1.gif - название первого нашего рисунка, width=400 height=281 - размеры рисунков).

Шаг 4.
Теперь напишем JavaScript скрипт, который будет обращаться к объекту Image и периодически изменять значение его атрибута "src", создавая, таким, образом, слайд-шоу. Код скрипта:

 


<script type="text/javascript">
<!--
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>

 

Основная строка в этом скрипте следующая:
document.images.slide.src=eval("image"+step+".src")
В левой части строки мы получаем доступ к атрибуту "src" объекта Image, который мы назвали "slide". В правой части строки мы динамически устанавливаем путь к новому источнику рисунка, таким образом изменяя рисунок. Три возможных источника:

image1.src
image2.src
image3.src

Шаг 5.

Соберем теперь весь код в одно целое. Таким образом, мы создали простое слайд-шоу на JavaScript. Обратите внимание, результат из Шага 2 мы вставляем между тегами <head></head>. Шаг 3 и Шаг 4 сливаем воедино и вставляем между тегами <body></body>, в то место сайта, где должно отображаться слайд-шоу.


<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="/slide1.gif"
var image2=new Image()
image2.src="/slide2"
var image3=new Image()
image3.src="/slide3.gif"
//-->
</script>
</head>
<body>
<img src="/slide1.gif" name="slide" width="450" height="56" />
<script>
<!--
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>

 

В результате у Вас должен получиться вот такой эффект - http://intellectservice.net/Show-slide/

 

Комментарии
Добавить новый Поиск
Виталик  - Слайд шоу   |95.84.59.xxx |2011-05-15 21:58:45
У меня не выходит. Может ли влиять на то что
я скрипт сую в ячейку таблицы?
Ответ
1 0
admin   |SAdministrator |2011-05-16 08:20:35
avatar Виталик, обратитесь в технический отдел -
постараемся помочь.
Ответ
1 0
buzulee  - Слайд шоу   |Registered |2011-06-24 02:03:09
avatar Здравствуйте!
Мне понравился
скрипт,простой и довольно доступный для
новичка.Есть желание сделать смену
изображений более плавной с эффектом
расстворения.
Подскажите пожалуйста,какие
изменения в коде для этого необходимо
сделать.
Ответ
4 0
Анастасия   |188.168.4.xxx |2011-11-17 23:54:31
СПАСИБО!!!
Ответ
0 0
Роман  - Вопрос по коду   |94.230.2.xxx |2011-11-24 13:58:32
Добрый день!
Спасибо за скрипт!
Нужна помощь
в разборе кода. Хочу залинковать картинки,
причем каждая из картинок будет вести на
разные страницы! Как мне это сделать где в
коде прописать линки к каждой из страниц и
как будет выглядеть код? И как к этому коду
можно добавить навигацию, например
навигация из квадратиков на самой картинке,
кликая на каждый ты переходишь на новую
картинку? Заранее спасибо!
Ответ
1 0
admin   |SAdministrator |2011-11-24 16:20:04
avatar К сожалению разработкой кода мы не
занимаемся, все скрипты берутся из открытых
источников и проверяются на
работоспособность и целесообразность. Вы
можете с подобным вопросом обратиться на
http://www.free-lance.ru/
Ответ
0 0
Art  - Благодарность!     |91.76.59.xxx |2012-01-05 05:56:48
Огромное спсибо, классный скрипт! Добро
пожаловать на мой сайт! Смотрите, что
получилось!
Ответ
0 0
Art   |91.76.59.xxx |2012-01-05 05:59:17
Сайт: http://astonmartinclub.at.ua/
Ответ
0 0
Dah   |95.189.28.xxx |2012-01-07 10:12:15
а куда вставлять код кэша?
Ответ
0 0
ALEX  - Спасибо     |178.187.243.xxx |2012-01-14 10:49:05
Спасибо все работает сайт на юкозе!!!

http://fil-mix.ucoz.net
Ответ
0 0
Оставить комментарий
Имя:
Email:
 
Веб-сайт:
Тема:
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Пожалуйста, введите проверочный код, который Вы видите на картинке.
Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
 
Интересная статья? Поделись ей с другими:
Поставить себе на сайт такой же плагин

Выберите свой язык

EnglishCzechDanishDutchFrenchGermanGreekItalianJapaneseKoreanNorwegianPolishPortugueseRomanianRussianSpanishSwedishLatvianSlovakSlovenianUkrainianEstonianHungarianTurkishGeorgian

Бесплатная рассылка

ТЕРРИТОРИЯ ON-LINE ОБУЧЕНИЯ!

Ваш e-mail: *
Ваше имя: *

 

Масса полезной информации, 
видеоуроков, руководств,
новостей, статей и обзоров...
И все это
АБСОЛЮТНО БЕСПЛАТНО!

Регистрация / Вход

Сейчас на сайте

Сейчас 3 гостей онлайн

 

Valid XHTML and CSS.