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

Слайд-шоу или презентация

<Вернуться в каталог>	Скопируйте и вставте
15+ Excellent High Speed Photographs 20 Beautiful Long Exposure Photographs 35 Amazing Logo Designs Create a Vintage Photograph in Photoshop 15+ Excellent High Speed Photographs Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....read more 20 Beautiful Long Exposure Photographs Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....read more 35 Amazing Logo Designs liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....read more Create a Vintage Photograph in Photoshop Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....read more	Внутри тега <HEAD> - </HEAD>
	<STYLE type=text/css> /* размер и стиль блока презентации / #featured{width:400px; padding-right:250px; position:relative; border:5px solid #ccc; height:250px; background:#fff;} / параметры, местоположение зоны переключения и стили всех элементов в зоне переключения / #featured ul.ui-tabs-nav{position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:250px;} #featured ul.ui-tabs-nav li{padding:1px 0; padding-left:13px; font-size:12px; color:#666;} #featured ul.ui-tabs-nav li img{float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee;} #featured ul.ui-tabs-nav li span{font-size:11px; font-family:Verdana; line-height:18px;} #featured li.ui-tabs-nav-item a{display:block; height:60px; color:#333; background:#fff; line-height:20px;} #featured li.ui-tabs-nav-item a:hover{background:#e2e2f2;} #featured li.ui-tabs-selected{background:url('http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/selected-item.gif') top left no-repeat;} #featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#ccc;} / параметры, местоположение и стили надписей но фото(можно вставить фон-картинку как у меня затуманеный низ картинок где надпись) / #featured .ui-tabs-panel{width:400px; height:250px; position:relative; margin-bottom:-5px;} / 999 */ #featured .ui-tabs-panel .info{position:absolute; top:195px; left:0; height:55px;} #featured .info h2{font-size:18px; font-family:Georgia, serif; color:#fff; padding-left:3px; margin:0; overflow:hidden;} #featured .info p{margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#000000;} #featured .info a{text-decoration:none; color:#fff;} #featured .info a:hover{text-decoration:underline;} #featured .ui-tabs-hide{display:none;} </style> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/js/jquery.js"></script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/js/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> <!-- rotate - ротация+ручное переключение(далее период ротации), norotate - только ручное переключение -->
	Впринципе здесь всё просто. Весь дизайн презентации, её компановка и все стили задаются в CSS, поэтому скрипты jQuery Вам впринципе и не нужны, в них менять или настраивать нечего. Только параметры ротации сделаны доступными чтобы Вы могли ей управлять как Вам нужно(они подписаны).
Внутри тега <BODY> - </BODY> там где у Вас будет презентакия.
<div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"> <!-- задаём начальную --> <a href="#fragment-1"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image1-small.jpg" alt=""><span>15+ Excellent High Speed Photographs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image2-small.jpg" alt=""><span>20 Beautiful Long Exposure Photographs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image3-small.jpg" alt=""><span>35 Amazing Logo Designs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image4-small.jpg" alt=""><span>Create a Vintage Photograph in Photoshop</span></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <!-- задаём начальную --> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image1_1.jpg" alt=""> <div class="info"> <h2><a href="#">15+ Excellent High Speed Photographs</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p> </div> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image2_1.jpg" alt=""> <div class="info"> <h2><a href="#">20 Beautiful Long Exposure Photographs</a></h2> <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p> </div> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image3_1.jpg" alt=""> <div class="info"> <h2><a href="#">35 Amazing Logo Designs</a></h2> <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/921/img/image4_1.jpg" alt=""> <div class="info"> <h2><a href="#">Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">read more</a></p> </div> </div> </div>
Здесь тоже всё толжно быть понятно. Задаём картинки и текст в зоне управления, картинки и текст и ссылки(если нужно) в зоне презентации. Задаём начальную(подписано) и всё должно работать. Колличество картинок в презентации впринципе любое.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.