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

Слайдер-переключатель блоков информации


Content 1 Это слайдер-переключатель блоков информации. Блоки можно переключать как в ручную(наведите курсор на нужный Вам блок в меню слева или справа), и они переключаются как в слайдере автоматически(с заданной Вами частотой).Все стили и параметры задаются в CSS таблицах. Впринципе слайдер ориентирован на Firefox но работает и в IE(правда не так эффектно). В блоках можно размещать практически любую информацию: текст, картинки, ссылки, формы, таблички, Flash и т.д. Колличество блоков в слайдере впринципе на Ваше усмотрение. Content 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci. Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue. Content 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci. Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue. Content 4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci. Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<link rel="stylesheet" type="text/css" href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/css/jquery.hrzAccordion.defaults.css"> <link rel="stylesheet" type="text/css" href="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/css/jquery.hrzAccordion.examples.css"> <script type="text/javascript"> var metka_okna = "right"; // титул открытого окна (сейчас справа) var skorost_okna = 1000; // скорость открытия и закрытия окна блока var period_slajdera = 10000; // период слайдера </script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/lib/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/lib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/lib/jquery.hrzAccordion.js"></script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/lib/jquery.hrzAccordion.examples.js"></script> <style> /* задаём картинку в названии контейнера */ .contentWrapper h3{margin-left: 60px; padding-left: 0px; border-bottom: 1px solid #FF0000; background: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/blade_grey_sel_gor.png) no-repeat; } p{ padding: 10px; } </style>
	Основное всё подписано. Все стили задаются в CSS таблицах.
	Внутри тега <BODY> - </BODY> там где у Вас будет текст.
	<ul class="test"> <li><div class="handle"><img src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/title1.png'></div><img style="background-color: #444444; border: #ff0000 1px solid;" src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/zastawka_script_luch1.gif' align='left'> <h3> Content 1</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> <br> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> </li> <li><div class="handle"><img src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/title2.png'></div><img style="width: 280px; border: #ff0000 1px solid;" src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/image1.jpg' align='left'> <h3> Content 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> <br> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> </li> <li><div class="handle"><img src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/title3.png'></div><img style="width: 280px; border: #ff0000 1px solid;" src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/image2.jpg' align='left'> <h3> Content 3</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> <br> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> </li> <li><div class="handle"><img src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/title4.png'></div><img style="width: 280px; border: #ff0000 1px solid;" src='http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/916/images/image3.jpg' align='left'> <h3> Content 4</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> <br> Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> </li> </ul> <br /> <br /> <div style="clear:both;"></div>
Здесь тоже всё должно быть понятно. Блоки можно переключать как в ручную(наведите курсор на нужный Вам блок в меню слева или справа), и они переключаются как в слайдере автоматически(с заданной Вами частотой). Впринципе слайдер ориентирован на Firefox но работает и в IE(правда не так эффектно). В блоках можно размещать практически любую информацию: текст, картинки, ссылки, формы, таблички, Flash и т.д. Колличество блоков в слайдере впринципе на Ваше усмотрение.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.