Ну начнем!
Установка слайдера займет у вас не более 10мин!
-Переходим на страницу где хотим разместить свой слайдер!
-Жмем кнопку "Редактировать HTML код"
-Вот и первый скрипт:
Code
<bodi>
<link rel="stylesheet" type="text/css" href="http://ucozon.ru/SCRIN7/2/00121/js/style.css"> <script type="text/javascript" src="http://ucozon.ru/SCRIN7/2/00121/js/jquery.min.js" ></script><!--Не обязателен, на ucoz по умолчанию есть-->
<script type="text/javascript" src="http://ucozon.ru/SCRIN7/2/00121/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://ucozon.ru/SCRIN7/2/00121/js/jquery-ui.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script>
-Здесь не чего не надо менять!
-Теперь отступаем от этого скрипта ровно 2 строчки!
-И вставляем этот код:
все пояснения к этому коду:
1-Подчеркнутое вам нужно поменять! все подписано!
2-Не меняйте не что кроме подчеркнутого текста! Иначе все полетит прахом!
3-Всего нужно4 больших картинки размером 400 на 250 и 4 маленьких, желательно их копии в размере 65 на 45!
4-Ссылки лучше приготовить сразу!
5-Живой пример слайдера на моем сайте: http://pandora-fw.clan.su/
Code
<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="[u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 65 НА 45[/u]" alt="" width="65"><span>[u]ОПИСАНИЕ [/u]</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2"><img src="[u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 65 НА 45[/u]" alt="" width="65"><span>[u]ОПИСАНИЕ[/u]</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3"><img src="[u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 65 НА 45[/u]" alt="" width="65"><span>[u]ОПИСАНИЕ[/u]</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4"><img src="[u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 65 НА 45[/u]" alt="" width="65"><span>[u]ОПИСАНИЕ[/u]</span></a></li>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style=""><img src="[u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 400 НА 250[/u]" alt="" width="400"><div class="info"><h2> <a href="[u]ССЫЛКА НА СТРАНИЦУ ПЕРЕХОДА[/u]">[u]ТЕКСТ ССЫЛКИ[/u]</a></h2>
[u]ОПИСАНИЕ[/u]</p></div></div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel" style=""><img src=" [u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 400 НА 250[/u]" alt="" width="400"><div class="info"><h2> <a href="[u]ССЫЛКА НА СТРАНИЦУ ПЕРЕХОДА[/u]">[u]ТЕКСТ ССЫЛКИ[/u]</a></h2>
[u]ОПИСАНИЕ[/u]</p></div></div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel" style=""><img src=" [u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 400 НА 250[/u]" alt="" width="400"><div class="info"><h2> <a href="[u]ССЫЛКА НА СТРАНИЦУ ПЕРЕХОДА[/u]">[u]ТЕКСТ ССЫЛКИ[/u]</a></h2>
[u]ОПИСАНИЕ[/u]</p></div></div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel" style=""><img src=" [u]ССЫЛКА НА КАРТИНКУ РАЗМЕРА 400 НА 250[/u]" alt="" width="400"><div class="info"><h2>
<a href="[u]ССЫЛКА НА СТРАНИЦУ ПЕРЕХОДА[/u]">[u]ТЕКСТ ССЫЛКИ[/u]</a></h2>
[u]ОПИСАНИЕ[/u]</p></div></div></div>
</bodi>
Если вы все сделали правильно у вас получится отличный слайдер! А главное если вы поймете как им пользоваться не составит труда сделать еще один и лучше! Специально для сайта soft32.ucoz.ru от master17
