Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Библиотека: скачать готовые скрипты Javascript
Слайд-шоу «комплексное» с различными типами демонстрации изображений
Посмотрите на работу этого скрипта на отдельной веб-странице (персональный компьютер).
При помощи приводимого ниже клиентского сценария - скрипта Javascript - можно организовать слайд-шоу «комплексное» с различными типами демонстрации изображений. Три типа возможных прокруток (изображение на выбор по ссылке, ротатор изображений и выбор следующего случайного изображения) и случайный выбор стартовой картинки.
Можно использовать только ту часть скрипта, которая Вас заинтересовала (три функции). Чем больше количество изображений, тем интереснее работает скрипт. На мой взгляд, это самый удачный и практичный вариант из очень большого числа других ротаторов баннеров.
Обязательно указание команды: <body onload="randombanner()">
Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в свою веб-страницу в необходимое место.
<script language="javascript" type="text/javascript">
<!--
var imgpath=""
var bild="banner"
var divtag=null
var banners = new Array ('img00001.jpg','img00002.jpg','img00003.jpg','img00004.jpg') // набор изображений
var urls = new Array ('URL1','URL2','URL3','URL4') // набор ссылок или пустые записи
// End of Definition
function banner(chosen) {
if (document.images) {
if (document.layers && divtag!=null)
{ eval('document.'+divtag+'.document.images["'+bild+'"].src = '+imgpath+banners[chosen]) }
else
{ document [bild].src = imgpath+banners[chosen];
}
}
url = urls[chosen]
}
function jump()
{
new_window=window.open(url,"new_win", "toolbar=yes, location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes, width=800, height=600")
}
function randombanner()
{
rand=(banners.length-1)*Math.random()
chosen=Math.round(rand)
banner(chosen)
}
function rotate(time)
{
rand=(banners.length-1)*Math.random()
chosen=Math.round(rand)
banner(chosen)
setTimeout('rotate('+time+')',time)
}
//-->
</script>
<a href="javascript:jump()"><center><img src="img00001.jpg" id="banner" alt="clickme" border=1></A>
<br /><br />Для проверки случайности стартового выбора нажмите Ctrl+R
<br /><br />Функция banner(x): просмотр по ссылкам
<br /><a href="javascript:banner(0)">Картинка 1</A> |
<a href="javascript:banner(1)">Картинка 2</A> |
<a href="javascript:banner(2)">Картинка 3</A> |
<a href="javascript:banner(3)">Картинка 4</A> |
<br /><br />Функция randombanner(): смена картинки при нажатии ссылки
<br /><a href="javascript:randombanner()">Другое случайное изображение</A>
<br /><br />Функция rotate(time): ротатор изображений (1 секунда = 1000)
<br /><a href="javascript:rotate(3000)">Запустить случайный ротатор изображений</A>