Баннерный ротатор для сайта
Несколько примеров организации простых баннерных ротаторов для сайта.
Баннерный ротатор для сайта
Если у вас на сайте показываются рекламные блоки, можно повысит их кликабельность, перемешивая.
Вот несколько способов, как сделать простой баннерный ротатор у себя на сайте.
1. Простая крутилка, меняющая баннерные картинки на PHP
оин из наиболее надёжних и лучших способов — рандомизации баннеров на стороне сервера. Этот небольшой скрипт случайным образом перемешивает заданные ему картинки, и передаёт браузеру уже сформированный код. В данном коде генерируется случайное число, и на основании него два цикла выдают заданный список баннерных картинок.
$totalImages = 6;
$randomFirst = rand(1,$totalImages);
for ( $i=$randomFirst; $i <= $totalImages; $i++ ) {
echo "<img src=’images/ad-$i.png’ alt=’ad’ /> ";
}
for ( $i=1; $i < $randomFirst; $i++ ) {
echo "<img src=’images/ad-$i.png’ alt=’ad’ /> ";
}
?>
2. Ещё ротатор на PHP, менающий картинки перемешивая ассоциативные массивы
Это ещё один пример серверного ротатора, работающего на PHP. Только на этот раз картинки перемешаваются с помощью php-функции shuffle.
$totalImages = 6;
$all = range(1,$totalImages);
shuffle($all);
foreach ($all as $single) {
echo "<img src=’images/ad-$single.png’ alt=’ad’ /> ";
}
?>
Ротатор баннеров на основе jQuery
Данный вид ротатора работает на стороне клиента, и осуществляет перемешивание баннерных картинок на стороне клиента — в браузере пользователя. Для работы скрипта вам потребуется поключение библиотеки jQuery. Вот код этот ротатора:
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
$(function() {
$("#ad-group-one img").shuffle();
});
