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

Переключающиеся(вертикальный скроллинг) блоки информации

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 2Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. « Pagina 1 Pagina 2 Pagina 3 »	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<STYLE type=text/css> /* Блок информации / .glidecontentwrapper{position: relative; width: 350px; height: 230px; border: 5px solid #687C98; overflow: hidden;} .glidecontent{position: absolute; background: #222; padding: 10px; visibility: hidden; width: 330px; color: #0088ff;} / Кнопки управления / .glidecontenttoggler{width: 360px; margin-top: 6px; text-align: center; background: white;} .glidecontenttoggler a{display: -moz-inline-box; display: inline-block; border: 1px solid red; color: #2e6ab1; padding: 1px 3px; margin-right: 3px; font-weight: bold; text-decoration: none;} .glidecontenttoggler a.selected{background: #687Ca8; color: black;} .glidecontenttoggler a:hover{background: #E4EFFA; color: black;} .glidecontenttoggler a.toc{ /style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */ } .glidecontenttoggler a.prev, .glidecontenttoggler a.next{background: #1A1A1A; color: #880000;} .glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{background: #1A48A4; color: white;} </STYLE> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/934_b/js/jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/934_b/js/featuredcontentglider.js"></script>
	Всё подписано. Все параметры и стили переключаделя задаются в CSS.
	Внутри тега <BODY> - </BODY> там где у Вас будет блок переключателя.
<script type="text/javascript"> featuredcontentglider.init({ gliderid: "canadaprovinces", //ID del container principale, puт essere modificato a piacere ricordandosi di modificare anche il CSS contentclass: "glidecontent", //classe assegnata alle sezioni del pannello togglerid: "p-select", //ID del div che contiene i link di navigazione selected: 0, //Начальный блок. Sezione mostrata alla 'inizio (0=prima sezione) persiststate: false, speed: 1000, //Скорость смены блоков direction: "downup", //(направление смены блоков)Direzione dell'animazione: "updown", "downup", "leftright", or "rightleft" autorotate: false, //false - автоматическая ротация выключена, true - включена autorotateconfig: [3000, 2] //if auto rotate enabled, set [период ротации, колличество ротаций] }) </script> <div id="canadaprovinces" class="glidecontentwrapper"> <div class="glidecontent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<img src="zastawka_script_luch1.gif"></div> <div class="glidecontent"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="glidecontent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> <div id="p-select" class="glidecontenttoggler"> <a href="#" class="prev">«</a> <a href="#" class="toc">Pagina 1</a> <a href="#" class="toc">Pagina 2</a> <a href="#" class="toc">Pagina 3</a> <a href="#" class="next">»</a> </div>
Здесь тоже всё должно быть понятно. Как Вы видите можно задавать начальный блок, скорость и направление ротации, включать и выключать автоматическую ратацию и задавать колличество циклов автоматической ротации. Колличество блоков в перключателе на Ваше усмотрение. В блоки можно включать практически любую информацию.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.