Эффекты на основе Java Script

Слайд-шоу

	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/js/jquery-latest.js"></SCRIPT> <SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/js/jquery.easing.1.3.js"></SCRIPT> <SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/js/jquery.timer.js"></SCRIPT> <SCRIPT> $(document).ready(function(){ //This keeps track of the slideshow's current location (какую картинку пропустить при первом проходе) var current_panel = 1; //Controlling the duration of animation by variable will simplify changes (время перемещения-смены картинок) var animation_duration = 2500; // время отображения картинки $.timer(6000, function (timer) { //Determine the current location, and transition to next panel (координаты перемещения, зависят от варианта размещения картинок в зоне размещения картинок) switch(current_panel){ case 1: $("#slideshow").stop().animate({left: "-520px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration}); current_panel = 2; break; case 2: $("#slideshow").stop().animate({left: "-40px", top: "-180px"}, {easing: 'easeOutBack', duration: animation_duration}); current_panel = 3; break; case 3: $("#slideshow").stop().animate({left: "-520px", top: "-180px"}, {easing: 'easeOutBack', duration: animation_duration}); current_panel = 4; break; case 4: $("#slideshow").stop().animate({left: "-40px", top: "-360px"}, {easing: 'easeOutBack', duration: animation_duration}); current_panel = 5; break; case 5: $("#slideshow").stop().animate({left: "-520px", top: "-360px"}, {easing: 'easeOutBack', duration: animation_duration}); current_panel = 6; break; case 6: $("#slideshow").stop().animate({left: "-40px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration}); current_panel = 1; break; timer.reset(12000); } }); }); </SCRIPT> <STYLE> {margin-top:0;} / размер и цвет фона рабочей зоны / #window {CLEAR: both; BACKGROUND: #444444; MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 480px; POSITION: relative; HEIGHT: 180px;} / размер зоны размещения картинок, он определяет порядок размещения картинок в зоне и местоположение зоны / #slideshow {OVERFLOW: hidden; WIDTH: 960px; POSITION: relative; HEIGHT: 537px; left:-40;} / размер выводимого элемента */ #slideshow LI {DISPLAY: inline; FLOAT: left; WIDTH: 480px; HEIGHT: 180px} </STYLE>
	Впринципе всё подписано. Первые три скрипта это сами скрипты jQuery и там менять нечего. Колличество картинок зависит от ваших потребностей и впринципе любое.
Внутри тега <BODY> - </BODY> там где у Вас будет слайд-шоу.
<DIV id=window> <UL id=slideshow> <LI class=box1><IMG alt="Bald Eagle" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/img/bald-eagle.jpg" width=478> </LI> <LI class=box2><IMG alt="Panda" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/img/panda.jpg" width=478> </LI> <LI class=box3><IMG alt="Tiger" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/img/tiger.jpg" width=478> </LI> <LI class=box4><IMG alt="Macaw" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/img/macaw.jpg" width=478> </LI> <LI class=box5><IMG alt="http://skriptkpbstudio.ucoz.ru" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/img/zastawka_script_luch1.gif" width=280 height=120> </LI> <LI class=box6><IMG class=ramka alt="http://skriptkpbstudio.ucoz.ru" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/879/img/logo_skript_ser_bol.jpg" width=478 height=174> </LI></UL></DIV>
Задаём сами картинки, если нужно их размер и стиль.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.