Главная » Файлы » Всё для ucoz » Скрипты для uCoz | [ Добавить материал ] |
Слайдер изображений
[ · Скриншот ] | 09.05.2010, 11:03 |
Слайдер изображений Ниже приведенный код вставьте внутри тега : Code <!-- By For24.ru~--> <div id="header"> <div class="wrap"> <div id="slide-holder"> <div id="slide-runner"> <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a> <a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a> <div id="slide-controls"> <p id="slide-client" class="text"><strong>post: </strong><span></span></p> <p id="slide-desc" class="text"></p> <p id="slide-nav"></p> </div> </div> </div> </div> </div><!-- By For24.ru~--> Шаг 2: Подключаем стили css: Code *{ margin:0; padding:0; } html{ height:100%; } body{ height:100%; color:#a4a4a4; cursor:default; font-size:11px; line-height:16px; text-align:center; background-color:#000; background-position:50% 0; background-repeat:no-repeat; font-family:Tahoma,sans-serif; } a:link,a:visited{ color:#fff; text-decoration:none; } a img{ border:0; } div.wrap{ width:993px; margin:0 auto; text-align:left; } div#top div#nav{ float:left; clear:both; width:993px; height:52px; margin:22px 0 0; background:url url(images/nav-bg.png) 0 0 no-repeat; } div#top div#nav ul{ float:left; width:700px; height:52px; list-style-type:none; } div#nav ul li{ float:left; height:52px; } div#nav ul li a{ border:0; height:52px; display:block; line-height:52px; text-indent:-9999px; } div#header{ margin:-1px 0 0; } div#video-header{ height:683px; margin:-1px 0 0; } div#header div.wrap{ height:299px; background:url(images/header-bg.png) 50% 0 no-repeat; } div#header div#slide-holder{ z-index:40; width:993px; height:299px; position:absolute; } div#header div#slide-holder div#slide-runner{ top:9px; left:9px; width:973px; height:278px; overflow:hidden; position:absolute; } div#header div#slide-holder img{ margin:0; display:none; position:absolute; } div#header div#slide-holder div#slide-controls{ left:0; bottom:228px; width:973px; height:46px; display:none; position:absolute; background:url( images/slide-bg.png) 0 0; } div#header div#slide-holder div#slide-controls p.text{ float:left; color:#fff; display:inline; font-size:10px; line-height:16px; margin:15px 0 0 20px; text-transform:uppercase; } div#header div#slide-holder div#slide-controls p#slide-nav{ float:right; height:24px; display:inline; margin:11px 15px 0 0; } div#header div#slide-holder div#slide-controls p#slide-nav a{ float:left; width:24px; height:24px; display:inline; font-size:11px; margin:0 5px 0 0; line-height:24px; font-weight:bold; text-align:center; text-decoration:none; background-position:0 0; background-repeat:no-repeat; } div#header div#slide-holder div#slide-controls p#slide-nav a.on{ background-position:0 -24px; } div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);} div#nav ul li a{background:url(images/nav.png) no-repeat;} Шаг 3:простой JavaScript для Jquery ползунков: Скопируйте и вставьте следующий код для Jquery ползунков после HTML BODY. Code <script type=" text="" javascript=""> if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}]; </script><!-- By For24.ru~--> | |
Просмотров: 501 | Загрузок: 0 | |
Всего комментариев: 0 | |