ДЕВЯТЫЙ УРОК

Слайд-шоу

Ну, вижу, вы расслабились, разленились. Думаете, у вас есть фотоальбом и этого достаточно? Думаете, научились его делать? А я вам скажу, что ничему вы не научились! Вы даже не поняли, как это работает. Потому как все за вас сделал автомат.

Но, чтобы жизнь вам раем не казалась, сегодня вам придется поднапрячь мозги, потому как сегодня мы будем делать фотоальбом с помощью языка программирования Java Script. Что, испугались? Это хорошо… Когда человек чего-то пугается, силы его мобилизуется а, значит, и эффект будет максимальным.

Итак, почему именно Java Script? Можно же создать фотоальбом и без него? Конечно можно, Можно с помощью фреймов и/или таблиц. Но мы до них еще не дошли. Как дойдем, обязательно сделаем то, что хочется. А вот чем мне нравится этот Java Script, так это тем, что одну и ту же программку можно использовать сколь угодно раз, немного подправляя данные. И надеюсь вас в этом скоро убедить.

Подберите для этого урока несколько изображений. Они должны уже быть полностью оптимизированы для web. Я вот буду тренироваться на кошках. И даже завела для этого отдельную папочку "fotoalbom", куда скинула 6 фотографий с моими любимцами и назвала их соответственно:

cat01.jpg, cat02.jpg, cat03.jpg, cat04.jpg, cat05.jpg и cat06.jpg.

Размер всех фотографий - 400х300.

Я хочу поместить первой - фотографию кошки cat01.jpg, под ней разместить две кнопки с надписями "назад" и "вперед" с тем, чтобы, нажимая на соответствующую кнопку, вызывать следующее, либо предыдущее изображение.

Я не смогу научить вас всему языку Java Script, потому как многого не знаю. Да это мне и не нужно. Но постараюсь объяснить, как использовать некоторые его возможности. Надеюсь, у меня получится. Надеюсь, получится и у вас.

Рассмотрим по частям то, что мы напишем в нашем блокноте:

Думаю, с этой строчкой Вам все понятно. По умолчанию будет загружено изображение cat01.jpg, шириной 400, высотой 300

Это у нас будет загружена форма, имя (name), которой - form1, состоящая из двух кнопок (button), текст на которых (input type) будет на одной - "назад", а на другой - "вперед". При нажатии на соответствующую кнопку (onClick) будет выполняться либо сценарий функции dem(0), либо сценарий функции dem(1).

Все вроде просто пока, да? Дальше пойдет немного сложнее. Сейчас мы будем рассматривать, как выполнить этот сценарий на языке Java Script.

Вы еще не сбежали? И не заснули? Ну, тогда за храбрость ставлю вам пятерки. Даже если у вас в этом уроке ничего и не получится.

Все следующие сценарии записываются между тэгами <head> и </head>.

Сначала запишем язык, который мы будем использовать:

Затем загрузим предварительно все наши изображения: для этого сначала создадим массив (Array) для наших изображений, элементы которого создаются вызовом new Image(). Обратите внимание, что нумерация элементов массивов начинается с нуля (и так почти во всех языках программирования), i-ый элемент указывается путем добавления после имени переменной [i]. Не ошибитесь! Особо указывается, что каждое изображение создается с помощью оператора new, то есть раннее эта переменная не описана. Всего изображений у меня - шесть, от cat01.jpg до cat06.jpg, следовательно получится шесть элементов в массиве:

numimg = 0 imgslide=new Array () imgslide[0] = new Image () imgslide[1] = new Image () imgslide[2] = new Image () imgslide[3] = new Image () imgslide[4] = new Image () imgslide[5] = new Image ()

Далее каждому порядковому imgslide подставляем свое изображение:

imgslide[0].src = "cat01.jpg" imgslide[1].src = "cat02.jpg" imgslide[2].src = "cat03.jpg" imgslide[3].src = "cat04.jpg" imgslide[4].src = "cat05.jpg" imgslide[5].src = "cat06.jpg"

Далее в бой идет сценарий, отвечающий за смену изображений dem(n), где n - номер изображения (от 0 до 5), так как у меня, если вы не забыли, 6 фоток с кошками. Дадим описание этому сценарию (функции):

function dem(n) { if (n==1) {numimg++ if (numimg==6) numimg=0; } else {numimg-- if (numimg== -1) numimg=5; } document.images [0].src=imgslide [numimg].src }

document - это структура, которая содержит информацию о параметрах страницы. Мы видим его в виде страницы в окне браузера с кнопками, картинками, и т.д. Посмотрим, что именно происходит в вышеописанной функции. Алгоритм таков: функции передается параметр n, отвечающий за то, какая кнопка нажата - назад или вперед. Если вперед, то n - 1, в противном случае 0.

Осуществляем проверку на равенство с 1 (в Javascript проверка на равенство содержит не одно, а два знака "="). Если 1, т.е. была нажата кнопка вперед, то увеличиваем индекс, который мы задали переменной numimg, на 1 (numimg++). Аналогично делаем в случае, если n равно 0 - уменьшаем на 1 (numimg--). Обязательно надо делать проверку на границы. Ведь у нас нет картинок с индексами 6 или -1.

После этого мы присваиваем "источнику" рисунка (источник - имя файла на диске, хранящего изображение) в нашем документе под номером 0 (у нас только одно изображение на странице) источник изображения с только что вычисленным индексом numimg в созданном нами массиве рисунков imgslide.

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

Так что привожу полный текст нашего слайд-шоу, который я назвала catslide.html:

<html lang="ru"> <head> <title>Слайд-шоу</title> <script language="JavaScript"> numimg=0 imgslide=new Array () imgslide[0]=new Image () imgslide[1]=new Image () imgslide[2]=new Image () imgslide[3]=new Image () imgslide[4]=new Image () imgslide[5]=new Image () imgslide[0].src ="cat01.jpg" imgslide[1].src ="cat02.jpg" imgslide[2].src ="cat03.jpg" imgslide[3].src ="cat04.jpg" imgslide[4].src ="cat05.jpg" imgslide[5].src ="cat06.jpg" function dem(n) { if (n==1) {numimg++ if (numimg==6) numimg=0; } else {numimg-- if (numimg== -1) numimg=5; } document.images [0].src=imgslide [numimg].src } </script> </head> <body> <h1>Мои кошки</h1> <img src="cat01.jpg" width="400" height="300"> <form name=form1> <input type=button value=Назад onClick="dem(0)"> <input type=button value=Вперед onClick="dem(1)"> </form> <p> Я люблю кошек. На этих фотографиях Вы увидите шесть кошек,<br> если потрудитесь нажать кнопку "вперед" или "назад". <br> Вы с легкостью сможете сделать точно такую презентацию своих кошек,<br> а также собак, попугаев или своих закадычных друзей и подружек.<br> Удачи в освоении урока! </body> </html> Просмотр слайд-шоу

Обратите внимание, что файл catslide.html лежит в одной папочке со всеми нашими фотографиями. Если же фотография лежат в отдельной папке, то и код нужно прописать не просто "cat01.ipg", например, а "название папки/cat01.jpg"

Вот на этой ноте я и хочу закончить этот урок. А следующий наш урок будет посвящен ссылкам. И у вас должны быть подготовлены для этого как минимум две странички. Готовьтесь!

Чтобы картинки показывались в нужном месте, нужно присвоить контейнеру для картинок какой-нибудь id, например:

А из функции к нему обратиться так:

function dem(n) { if (n==1) { numimg++ if (numimg==6) numimg=0; } else {numimg-- if (numimg== -1) numimg=5; } document.getElementById("cats").src=imgslide [numimg].src }

К списку всех уроков

(В. Ахметзянова, 2005 г)