Ротатор банеров

[ferezan]

   У многих новичков часто встает вопрос как оживить свой сайт. Каждому хочется чтобы что-то мигало двигалось, и куда-то вело. Нашел простой ротатор баннеров который удалось удачно прикрутить на сайт. При этом не обязательно чтобы это был баннер. Может быть просто изображение. И на каждое изображение есть возможность добавить ссылку. При этом можно добавлять количество баннеров (изображений), а можно и не добавлять. Кому пригодится, используйте на здоровье. И пусть ваши сайты будут красочными.

Код Выделить Развернуть


<script type="text/javascript">
var CurrentBaner = 1;
function timer(){
var BanerCount = 3;
var BanImgLinks = ["img/NashPartner.jpg", "img/NashPartner2.jpg", "img/NashPartner3.jpg"];  // тут нужно прописать путь к изображениям
var BanLnkLinks = ["http://ardall.ru","http://ardall.ru/otoplenie.html","http://ardall.ru/uslugi.html"];// Тут заменить ссылки, если не менять, придут все ко мне..хе-хе
var obj=dоcument.getElementById('baner_pict');
obj.src=BanImgLinks[CurrentBaner];
var obj2=dоcument.getElementById('baner_link');
obj2.href=BanLnkLinks[CurrentBaner];
CurrentBaner++;
if (CurrentBaner==BanerCount){CurrentBaner=0;}
setTimeout(timer,5000);//это время отображения в мс, потом следующее изображение
}
setTimeout(timer,1);
</script>
<div id="baner" style="margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
width: 660px;
height: 200px;">
<a id="baner_link" href="http://ardall.ru" target="_blank"><img id="baner_pict" src="#" style="margin: 10px auto;
width: 660px;
height: 200px;
border-radius: 15px;
-webkit-box-shadow: 20px 20px 15px #373737;
box-shadow: 20px 20px 15px #373737;
border: 1px solid #000000;"></a>
</div>

Для тех у кого все в разных файлах тогда скрипт к скриптам, CSS добавить в СSS файл..Ну для кого совсем тяжко вот тоже самое, только с разделением.
Это вставить в скрипты...

Код Выделить Развернуть


var CurrentBaner = 1;
function timer(){
var BanerCount = 3;
var BanImgLinks = ["img/NashPartner.jpg", "img/NashPartner2.jpg", "img/NashPartner3.jpg"];  // тут нужно прописать путь к изображениям
var BanLnkLinks = ["http://ardall.ru","http://ardall.ru/otoplenie.html","http://ardall.ru/uslugi.html"];// Тут заменить ссылки, если не менять, придут все ко мне..хе-хе
var obj=dоcument.getElementById('baner_pict');
obj.src=BanImgLinks[CurrentBaner];
var obj2=dоcument.getElementById('baner_link');
obj2.href=BanLnkLinks[CurrentBaner];
CurrentBaner++;
if (CurrentBaner==BanerCount){CurrentBaner=0;}
setTimeout(timer,5000);//это время отображения в мс, потом следующее изображение
}
setTimeout(timer,1);

Это вставить в HTML

Код Выделить Развернуть


<div id="baner">
<a id="baner_link" href="http://ardall.ru" target="_blank"><img id="baner_pict" src="#"></a>
</div>

Это вставить в CSS...

Код Выделить Развернуть


#baner {
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
width: 660px;
height: 200px;
}
#baner_pict {
width: 660px;
height: 200px;
margin: 10px auto;
border-radius: 15px;
-webkit-box-shadow: 20px 20px 15px #373737;
box-shadow: 20px 20px 15px #373737;
border: 1px solid #000000;
}