Всё для Учёбы — студенческий файлообменник
1 монета
pdf

Студенческий документ № 005303 из ИУБиП

Лабораторное занятие № 16

Тема: Создание слайд-шоу

Цель: Рассмотреть принципы организации слайд-шоу

Задание:

1 Рассмотреть пример программы.

2 Переписать предложенный в задании 1 скрипт. Показать первым leo.gif, как в примере. Однако дальше новый cкрипт должен показать img3.src (num=3), потом img2.src, потом img1.src. Когда num=0, измените num на 3. В общем, перепишите скрипт задом наперед.

Необходимые приборы: ПК, текстовый редактор Блокнот, браузер

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

Методические рекомендации к выполнению задания 1 Разберемпример:

var num=1 img1 = new Image () img1.src = "leo.gif" img2 = new Image () img2.src = "dino.gif" img3 = new Image () img3.src = "rhino.gif"

function slideshow() { num=num+1 if (num==4) {num=1}

document.animal.src=eval("img"+num+".src")}

Щелкните, чтобы увидеть следующую картинку

Разобьем его на две части:

var num=1 img1 = new Image () img1.src = "leo.gif" img2 = new Image () img2.src = "dino.gif" img3 = new Image () img3.src = "rhino.gif"

• Вот кое-что новое! num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num - это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть доступной для любой функции.

• img1 = new Image() объявляет новый объект image (рисунок).

img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в leo.gif ; img2 хранится в dino.gif.

• (В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно.

• Рисунки тоже доступны для любой функции. Таким образом, программа загружает рисунки в память компьютера. Для следующего примера это будет еще важнее. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера. Теперьчасть №2: function slideshow()

{ num=num+1 if (num==4) {num=1}

document.animal.src=eval("img"+num+".src")}

• Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по строчке текста, запускается функция slideshow.

• slideshow() прибавляет к num единицу. Когда num доходит до 4, то возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.

• Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.

И наконец:

Щелкните, чтобы увидеть следующую картинку

• Тут кое-что новенькое. Видите, вызывается не функция, а JavaScript? Так используются все части скрипта, а не только те, что стоят внутри функции. Если вы напишете функцию по обычной схеме, то у вас не будет рисунков, потому что они останутся за скобками.

В InternetExplorer работает и обычная схема, то есть:

Щелкайте

Методические рекомендации к выполнению задания 2 Примерныйскрипт:

num=4

img1 = new Image (); img1.src = "leo.gif" img2 = new Image (); img2.src = "dino.gif" img3 = new Image (); img3.src = "rhino.gif" function slideshow() {num=num-1 if (num==0) {num=3}

document.mypic.src=eval("img"+num+".src") }

Щелкните, чтобы увидеть следующую картинку

Вопросы для самоконтроля:

1 Дайте определение понятию слайд-шоу.

2 Каким образом осуществляется создание слайд шоу?

3 Для чего предназначено слайд-шоу?

4 Какие команды используются для организации слайд-шоу на вебстранице?

Показать полностью… https://vk.com/doc62771886_249148719
192 Кб, 11 декабря 2013 в 10:53 - Россия, Ростов-на-Дону, ИУБиП, 2013 г., pdf
Рекомендуемые документы в приложении