Простой JavaScript ротатор баннеров
Если Вам необходимо разместить на своем сайте более одного баннера, то в таком случае мы советуем Вам воспользоваться скриптом простого ротатора баннеров. Данный скрипт позволит Вам значительно сократить используемое под рекламу пространство Вашего сайта.
Ниже Вы можете наблюдать пример работы предлагаемого скрипта ротатора баннеров:
В результате работы скрипта ротатора баннеров, на Вашем сайте поочередно будут отображаться различные изображения, при клике по которым пользователь будет перенаправлен на нужный сайт по соответствующей каждому изображению ссылке.
Рассматриваемый в данной теме скрипт является немного обновленной и доработанной версией Скрипта простого ротатора баннеров, который был рассмотрен нами еще в 2011 году.
В данном ротаторе мы также добавили проверку на получение и потерю фокуса страничкой, для запуска и остановки смены баннеров. Это сделано потому, что пользователи нашего прошлого скрипта жаловались на то, что при сворачивании странички или переходе к другой страничке и при последующем возвращении к страничке с ротатором баннеров наблюдался "глюк", который заключался в быстром мелькании (смене) изображений.
Для получения простого ротатора баннеров, как в примере, показанном на данной страничке, предлагаем Вам воспользоваться нашим скриптом. Для этого, в том месте Вашей странички, где Вы планируете поместить JavaScript код поочередной смены изображений и ссылок, добавьте код, описывающий первый баннер при загрузке странички:
<div align="center">
<a href="news.php" id="links">
<img id="banners" src="image/img_1.png">
</a>
</div>Далее разместите JavaScript код, который будет осуществлять смену баннеров на Вашей страничке:
<script type="text/javascript">
var URL = new Array("news.php", "script.php", "useful_site.php", "statistics.php");
var image = new Array("image/img_1.png", "image/img_2.png", "image/img_3.png",
"image/img_4.png");
var banner = 3;
var pause = 2000;
var flag = 0;
function Rotate() {
if (banner==URL.length-1) banner = 0;
else banner++;
document.getElementById("banners").src = image[banner];
document.getElementById("links").href = URL[banner];
}
function Start_Rotate() {
if (flag==0) { Timeout = window.setInterval("Rotate()", pause); flag = 1; }
}
window.onfocus = function(){ Start_Rotate(); }
window.onblur = function(){ window.clearInterval(Timeout); flag = 0; }
if (flag==0) Start_Rotate();
</script>Все. Простейший ротатор баннеров готов к работе. Вам остается лишь указать в скрипте пути к изображениям баннеров и соответствующие им ссылки.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.