Артём Мáлков

Простой скрипт ротатора ссылок и баннеров на PHP+jQuery

24 апр10 коммАртём Мáлков

В предыдущей статье я рассказал о том, как сделать ротатор баннеров в CMS DataLife Engine на основе стандартной функции «Рекламные материалы». А сейчас я покажу, как подобное можно просто реализовать на PHP+jQuery для любой CMS.

Идея будет следующая: составим небольшой массив ссылок в HTML-разметке, с помощью функции shuffle перемешаем его, получим первые N элементов и посредством jQuery выведем результат на страницу.

1. Скрипт-обработчик будет выглядеть следующим образом:

<?php

	header('Content-Type: text/html; charset=utf-8');

	$link = [
		'<div><a href="https://www.pandoge.com">Все для начинающего вебмастера</a></div>',
		'<div><a href="https://vk.com">Вконтакте</a></div>',
		'<div><a href="https://ya.ru">Yandex</a></div>',
		'<div><a href="https://www.google.ru">Google</a></div>',
		'<div><a href="https://mail.ru">Mail</a></div>',
		'<div><a href="https://www.pandoge.com">www.pandoge.com</a></div>',
		'<div><a href="https://www.yahoo.com">Yahoo</a></div>'
	]; // Массив ссылок

	shuffle($link); // Перемешиваем массив

	$limit = 3; // Количество выводимых ссылок

	if($limit > count($link)) {

		$limit = count($link);

	}

	for($i = 0; $i < $limit; $i++) {

		echo $link[$i];
	
	}

?>

Его вы помещаете в PHP-файл и размещаете на сайте в нужной вам директории (папке).

2. Далее с помощью jQuery получим ссылки, которые отобрал наш PHP-скрипт. В нужное место на вашем сайте вставьте скрипт и элемент для вывода результата:

<div id="get_link"></div>

<script>

	$(document).ready(function() {

		$("#get_link").load("/rotator.php");

	});

</script>

Если вы хотите сделать регулярное автоматическое подтягивание (получение) новой выборки без перезагрузки страницы, то скрипт jQuery замените на этот:

<script>

	$(document).ready(function() {

		$("#get_link").load("/rotator.php");

		setInterval(function() {

			$("#get_link").load("/rotator.php");

		}, 5000); // Получаем новую выборку каждые 5 секунд

	});

</script>

В обоих вариантах не забудьте «/rotator.php» изменить на адрес до вашего PHP-скрипта.

Рекомендуем к просмотру
Как убрать подчеркивание у ссылок в HTML на CSS/jQuery
Статьи и советы
Делаем первую букву в строке заглавной на PHP/jQuery/CSS
Модули и скрипты
Как сделать ротатор баннеров в DLE?
Статьи и советы
10
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    1
      •  Пользователь
    7 ноя в 10:24

    Добрый день!

    Помогите пожалуйста)

    Есть сайт Мойсайт.com/rotator.html

    Есть 20 конечных ссылок.

    Требуется чтобы при переходе по ссылке Мойсайт.com/rotator.html каждый новый ip переходил по своей конечной ссылке. Т.е. ip1 – ссылка 1, ip2 – ссылка 2… и так до 20ой. ip 21 получит первую ссылку.

      • 1
      1083
        •  Команда Pandoge
      8 ноя в 11:30

      Vladimir Syrovatskyi, здравствуйте!

      Конечную - имеется ввиду произвести редирект на соответствующую ссылку?

    • 3
    1
      •  Пользователь
    18 авг в 15:25

    Здравствуйте!

    Скажите, этот скрипт подойдёт для самописного сайта на htm файлах?

      • 1
      1083
        •  Команда Pandoge
      9 фев в 02:40

      Ann, здравствуйте!

      Поддержка PHP есть на хостинге?

    • 3
    1
      •  Пользователь
    23 апр в 11:20

    Привет Артем! Установил скрипт на сайт Wordpress но ссылки не выводятся в нужном месте. Если зайти по такому адресу http://сайт.ru/rotator.php то ссылки работаю и появляются новые при обновлении страницы, а мне надо выводить их над шапкой сайта. Можешь посмотреть в чём дело?

      • 1
      1083
        •  Команда Pandoge
      изменено 24 апр в 10:35

      Виктор Кузнецов, Здравствуйте!

      Статью обновил. С учетом нового кода и CMS сделайте следующее.

      1. В файл functions.php из вашей темы вставляете PHP-функцию:

      function rotator($limit) {
      
      	$link = [
      		'<div><a href="https://www.pandoge.com">Все для начинающего вебмастера</a></div>',
      		'<div><a href="https://vk.com">Вконтакте</a></div>',
      		'<div><a href="https://ya.ru">Yandex</a></div>',
      		'<div><a href="https://www.google.ru">Google</a></div>',
      		'<div><a href="https://mail.ru">Mail</a></div>',
      		'<div><a href="https://www.pandoge.com">www.pandoge.com</a></div>',
      		'<div><a href="https://www.yahoo.com">Yahoo</a></div>'
      	]; // Массив ссылок
      
      	shuffle($link); // Перемешиваем массив
      
      	if($limit > count($link)) {
      
      		$limit = count($link);
      
      	}
      	
      	$result = '';
      	
      	for($i = 0; $i < $limit; $i++) {
      
      		$result .= $link[$i];
      	
      	}
      	
      	return $result;
      	
      }

      2. В нужное место на сайте вставьте:

      <?php
      
      	echo rotator(3);
      	
      ?>

      Здесь «3» - количество выводимых ссылок.

    • 4
    766
      •  Гости
    9 мая в 01:54

    Спс. Попробую. в div можно всё что угодно вставить? Даже код РСЯ или Адсенс?

      • 6
      1083
        •  Команда Pandoge
      9 мая в 03:48

      Илья, а почему бы и нет. Главное: 1 баннер - 1 строка

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge