НОУ ИНТУИТ | Практикум по программированию на JavaScript. Лекция 28: Слайд-шоу

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

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

Твой путь к знаниям!

Опубликован: 19.10.2006 | Доступ: свободный | Студентов: 8783 / 1673 | Оценка: 3.95 / 3.68 | Длительность: 09:40:00

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 87 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Динамическая загрузка и обновление изображений.

Ключевые слова: скрипт, пользователь, ссылка, команда, переменная, объект, высота, программа, загрузка, значение, функция, сценарий, сложение, вычитание, единица

Концепция

Последние три урока посвящены тому, чтобы помочь читателю собрать в целое полученные знания. Далее следуют три популярных сценария JavaScript, которые будут частично проанализированы. Часть работы будет поручена читателю.

Посмотрите на скрипт и попробуйте разобраться, как и что он делает. Выделите части, которые создают определенные события. А лучше всего постарайтесь немного изменить его в лучшую сторону.

В этом примере показано слайд-шоу. Пользователь щелкает по ссылке и переходит к следующей картинке. Мы воспользуемся командой If и переменной num. Ничего нового? Не совсем!

Сценарий

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
  var num=1
  img1 = new Image ()
  img1.src = "pic1.gif"
  img2 = new Image ()
  img2.src = "pic2.gif"
  img3 = new Image ()
  img3.src = "pic3.gif"  
function slideshow()
  {
   num=num+1
   if (num==4)
    {num=1}
document.animal.src=eval("img"+num+".src")
   }
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="pic1.gif" NAME="animal" BORDER=0>
<p>

<A HREF="JavaScript:slideshow()">
   Щелкните, чтобы увидеть следующую картинку</A>

</CENTER>
</BODY>
</HTML>

Результат работы сценария

На странице выводится изображение pic1.gif и ссылка "Щелкните, чтобы увидеть следующую картинку", при щелчке на которой изображение изменяется на pic2.gif и так далее.

Разбор сценария

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

<SCRIPT type="text/javascript">
          var num=1
          img1 = new Image ()
          img1.src = "pic1.gif"
          img2 = new Image ()
          img2.src = "pic2.gif"
          img3 = new Image ()
          img3.src = "pic3.gif"

Новый момент! num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num — это переменная. Объявляя переменную в начале сценария JavaScript вне функции, мы делаем ее глобальной переменной, то есть доступной для любой следующей далее функции.

img1 = new Image() объявляет новый объект image (изображение). img1.src= источник объекта, определяет, какая картинка хранится в объекте image. Это стандартная схема. Она должна использоваться, когда задается ряд изображений, как в этом сценарии. pic1.gif хранится в img1.src. pic2.gif хранится в img2.src.

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

Объекты image доступны любой следующей далее функции. Так же, как и переменная num, они находятся вне функции. Они просто перечислены здесь, чтобы их могла использовать любая часть программы. Помещая все объекты изображений вне функции, программа загружает изображения. Это будет еще более важно в следующем примере анимации. Во время анимации пользователь не захочет ждать загрузки каждой картинки с сервера. Поэтому требуется предварительная загрузка.

Теперь вторая часть:

function slideshow()
{
num=num+1
if (num==4)
  {num=1}
document.animal.src=eval("img"+num+".src")
}
</script>
</head>
<body>

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

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

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

И, наконец, команда, которая все это запускает в работу :

<a href="JavaScript:slideshow()">
Щелкните, чтобы увидеть следующую картинку</a>

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

Задание

Перепишите приведенный выше сценарий JavaScript. Покажите первым pic1.gif, как в примере. Однако дальше новый сценарий должен показать img3.src ( num=3 ), потом img2.src, потом img1.src. Когда num=0, измените num на 3.

В общем, перепишите сценарий "задом наперед".

Возможное решение

Если + означает сложение, то - означает вычитание. Посмотрите на сценарий. Менять местами рисунки не надо, хотя и можно. Просто сделайте так, чтобы из num каждый раз вычиталась единица, а когда num добирается до нуля, снова начинайте с трех.

Вот сценарий:

<html>
<head>
<SCRIPT type="text/javascript">
    num=4
    img1 = new Image (); img1.src = "pic1.gif"
    img2 = new Image (); img2.src = "pic2.gif"
    img3 = new Image (); img3.src = "pic3.gif"  
    function slideshow()
    {
       num=num-1
       if (num==0)
          {num=3}
      document.mypic.src=eval("img"+num+".src")
    }
</script>
</head>
<body>
<center>
<img src="pic1.gif" name="mypic" border=0>
<p>
<a href="JavaScript:slideshow()">
Щелкните, чтобы увидеть следующую картинку</a>
</center>
</body>
</html>

Дальше >>

Авторизоваться

Практикум по программированию на JavaScript