ЦЕЛЬ ЛАБОРАТОРИИ:
1. Разработайте JavaScript для создания заданного баннера.
2. Разработайте JavaScript для создания заданного слайд-шоу.

Баннерная реклама

  • Баннерная реклама является отличительной чертой каждой коммерческой веб-страницы.
  • Обычно он располагается в верхней части веб-страницы, и его цель — привлечь внимание посетителя.
  • Все рекламные баннеры представлены в файловом формате, таком как GIF, JPG, TIFF или других распространенных форматах графических файлов.
  • Некоторые из них представляют собой Flash-ролики, для просмотра которых посетитель должен иметь браузер с подключаемым модулем Flash.
  • Ниже приведены шаги для вставки баннерной рекламы на веб-страницу.

1) Создайте рекламный баннер с помощью графического инструмента, такого как PhototShop, Paint и т. д.

2) Создайте элемент ‹img› на веб-странице с высотой и шириной для отображения баннерной рекламы.

3) Создайте JavaScript, который загружает и отображает рекламные баннеры.

Слайд-шоу

  • Слайд-шоу по своей концепции похоже на рекламный баннер в том смысле, что слайд-шоу вращает несколько изображений на веб-странице.
  • Слайд-шоу дает посетителю возможность изменить отображаемое изображение: посетитель может нажать кнопку «Вперед», чтобы увидеть следующее изображение, и кнопку «Назад», чтобы увидеть предыдущее изображение.
  • Создание слайд-шоу для вашей веб-страницы — простой процесс.
  • Тег ‹body› содержит тег ‹img›, который используется для отображения изображения на веб-странице.

Примеры программ

1. Разработайте программу JavaScript для создания простого рекламного баннера

<html>
<head>
 <title>Banner Advertisements</title>
</head>
<body bgcolor="#EEEEEE">
 <a href="https://www.javatutsweb.com">
      <img src="java-programming-ad.jpg"/>
 </a>
</body>
</html>

2. Разработайте программу JavaScript для создания слайд-шоу с группой из четырех изображений, а также смоделируйте следующий и предыдущий переход между слайдами в вашем JavaScript

<html>
<head>
    <title>Image SlideShow</title>
    <script>
    var images = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"];
    var count = 0;
    function previousImage() 
    {
        if(count!=0)
            count--;
        var id = document.getElementById("imageId");
        id.src = "images/" + images[count];
    }
    function nextImage() {
        if(count!=4)
            count++;
        var id = document.getElementById("imageId");
        id.src = "images/" + images[count];
    }
</script>
</head>
<body>
<center>
    <img id="imageId" src="images/01.jpg" width="300" height="200"/>  
    <br/>
    <hr>
    <input type="button" value="< Prev Image" 
                                      onclick="previousImage()"/>
    <input type="button" value="Next Image >" 
                                      onclick="nextImage()"/>
</center>
</body>
</html>