HomeHTML кодыРотатор баннеров РСЯ без перезагрузки страницы

Ротатор баннеров РСЯ без перезагрузки страницы

10.01.2025
Просмотров 33

В монетизации сайтов бывают моменты, когда нужно, не перезагружая страницы, сменить на ней баннеры партнерской программы, например, РСЯ или любой другой программы, где важны просмотры. В каких случаях это важно? Например, если посетитель играет в флэш игру на странице или общается в чате. Тогда посетитель долгое время находится на одной странице, не покидая ее и за все это время вы получаете всего один просмотр баннера.

Приведенный ниже код дает возможность через определенное время менять показанный баннер или обновлять его без перезагрузки всей страницы.

Пример HTML-кода ротатора баннеров РСЯ

Ниже представлен простой HTML-код, который реализует ротатор баннеров. В нем используется JavaScript, чтобы менять баннеры через равные промежутки времени.

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ротатор баннеров</title>
    <style>
        /* Оформление контейнера для баннеров */
        #banner-container {
            width: 300px; /* Ширина баннера */
            height: 250px; /* Высота баннера */
            margin: 0 auto; /* Центрирование */
            overflow: hidden; /* Скрыть излишек */
            position: relative; /* Для позиционирования элементов */
        }
    </style>
</head>
<body>
    <!-- Контейнер для баннеров -->
    <div id="banner-container">
        <div id="banner-rotator">
            <!-- Первый баннер -->
            <div>
                <script>
                    /* Здесь может быть первый код для вставки рекламной платформы */
                    document.write("<h3>Баннер 1</h3>");
                </script>
            </div>

            <!-- Второй баннер -->
            <div>
                <script>
                    /* Здесь может быть второй код для вставки рекламной платформы */
                    document.write("<h3>Баннер 2</h3>");
                </script>
            </div>

            <!-- Третий баннер -->
            <div>
                <script>
                    /* Здесь может быть третий код для вставки рекламной платформы */
                    document.write("<h3>Баннер 3</h3>");
                </script>
            </div>
        </div>
    </div>

    <script>
        // JavaScript для ротатора баннеров
        const bannerRotator = document.getElementById('banner-rotator');
        const banners = bannerRotator.children;
        let currentBanner = 0; // Индекс текущего баннера
        const rotationInterval = 3000; // Время между сменой баннеров (мс)

        // Функция смены баннера
        function rotateBanner() {
            // Скрываем текущий баннер
            banners[currentBanner].style.display = 'none';

            // Переходим к следующему баннеру (или возвращаемся к первому)
            currentBanner = (currentBanner + 1) % banners.length;

            // Показываем следующий баннер
            banners[currentBanner].style.display = 'block';
        }

        // Начальные настройки: показываем только первый баннер
        for (let i = 0; i < banners.length; i++) {
            banners[i].style.display = i === 0 ? 'block' : 'none';
        }

        // Запускаем интервал для смены баннеров
        setInterval(rotateBanner, rotationInterval);
    </script>
</body>
</html>

Разъяснение HTML-кода

HTML-структура:

  • Контейнер для баннеров:
    • Контейнер с ID banner-container задает фиксированные размеры для размещения баннеров (например, 300×250 px, как в РСЯ).
    • Внутри находится контейнер banner-rotator, содержащий несколько для баннеров.
  • Баннеры:
    • Каждый баннер вставляется в отдельный и использует document.write для вставки партнерского кода.

CSS:

  • #banner-container:
  • Задает размеры и форматирование контейнера для баннеров.
  • Свойство overflow: hidden; помогает обрезать содержимое, выходящее за рамки контейнера.

JavaScript:

  1. Логика ротатора:
    • banners – массив всех баннеров внутри banner-rotator.
    • currentBanner – индекс текущего активного баннера.
    • rotationInterval – интервал смены баннера (по умолчанию 3000 мс = 3 секунды).
  2. Функция rotateBanner:
    • Скрывает текущий баннер: banners[currentBanner].style.display = ‘none’.
    • Вычисляет индекс следующего баннера: (currentBanner + 1) % banners.length.
    • Показывает следующий баннер: banners[currentBanner].style.display = ‘block’.
  3. Запуск ротатора:
    • Для смены баннеров используется функция setInterval, которая вызывает rotateBanner каждые rotationInterval миллисекунд.

Как использовать ротатор баннеров РСЯ

  • Вставьте коды рекламных платформ (например, РСЯ) внутрь
<script> каждого <div>. 
- Измените значение rotationInterval, чтобы настроить интервал смены баннеров под свои требования.

Другие полезные HTML-коды в нашей коллекции, пользуйтесь на здоровье 😉

Tags:, , ,

Related Posts