Скачать шаблоны сайтов:
Слайд-шоу на JavaScript
Как создать слайд-шоу? Этот вопрос является, наверное, наиболее часто задаваемым после создания эффектов при наведении курсора на объект. Наиболее просто решить эту задачу используя JavaScript. В этой небольшой статье мы расскажем, как создать простое слайд-шоу, используя JavaScript.
Итак, приступим.
Шаг 1.
Для начала нам понадобятся рисунки, которые будут включены
в слайд-шоу. В примере мы будем использовать три рисунка.
Шаг 2.
Далее нам необходимо выполнить предварительную загрузку
рисунков. Так как мы используем JavaScript, и хотим, чтобы
рисунки отображались без задержек, то прежде, чем
отобразить рисунки, необходимо загрузить их в кэш.
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
Мы создали три экземпляра объекта Image, каждый из которых ссылается на рисунок, составляющий слайд-шоу. Таким образом, рисунки загружаются в кэш и становятся доступными для отображения в любое время. Обратите внимание, что весь код включен в область <head>.
Шаг 3.
Добавим HTML код для отображения первого рисунка из
слайд-шоу.
<body>
<img src="firstcar.gif" name="slide"
width=100 height=56>
</body>
Обратите внимание, что мы задали значение атрибуту "name" нашего рисунка. Таким образом, с помощью JavaScript мы сможем манипулировать рисунком.
Шаг 4.
Теперь напишем JavaScript скрипт, который будет обращаться
к объекту Image и периодически изменять значение его атрибута "src", создавая,
таким, образом, слайд-шоу. Код скрипта:
<!--
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.
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<img src="firstcar.gif" name="slide"
width="100" 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>
Другие новости, статьи по теме PHP, JavaScript, web-программирование:
ORDER BY DESC с несколькими значениями NULL в MySQL
Простое слайд-шоу на JavaScript, случайный выбор изображений
Специальные символы в html
Загрузка файлов на сервер, скрипт на php
PHP+MySQL вопросительные знаки
Динамическое создание диаграмм на php
ORDER BY DESC с несколькими значениями NULL в MySQL
Простое слайд-шоу на JavaScript, случайный выбор изображений
Загрузка файлов на сервер, скрипт на php
PHP+MySQL вопросительные знаки
Динамическое создание диаграмм на php
Прямое пополнение счета без комиссии (украинские мобильные операторы)
Все новости, статьи