Слайдер для темного дизайна!
Здраствуйте вот решил выложить,созданный мною,простенький слайдер на Jquery,выполненный в темных тонах! Его впрочем можно усовершенствовать,но все же времени у меня не так много и поэтому решил выложить его в паблик,надеясь что все же мой сладеренок=)будет жить "новой жизнью":D
Итак первый шаг - давайте зальем папку img в корень вашего сайта!
Шаг №2
Перейди в админ панели во вкладку css и вставте куда угодно,указанный ниже css код:
Шаг №3
Вставте саму структуру нашего слайдера в то место где вы его хотите видеть:
Шаг №4
После html кода слайдера вставим javascript код(вы же можете вынести его в отдельный яваскрипт файл и подключить его)
Ну вот и все!Приятного использования=)
Итак первый шаг - давайте зальем папку img в корень вашего сайта!
Шаг №2
Перейди в админ панели во вкладку css и вставте куда угодно,указанный ниже css код:
Code
.slider{height:240px;width:848px;margin:0px auto;}
.navigation_hover{background:url('/img/navigation_hover.png')no-repeat;height:40px;width:398px;position:relative;left:-27px;padding:0px 0px 0px 24px;}
#images_slide{background-image: url("/img/loader.gif");background-repeat: no-repeat;background-position: 50% 50%; width: 477px; height: 240px;float:left;}
#slaider_navigation a{color:#807f7f;text-decoration:none;font-size:12px;font-family:Arial;font-weight:bold;}
#slaider_navigation p{padding:12px 0px 0px 12px;margin:0px;text-align:left;}
.navigation{background:url('/img/navigation.png')no-repeat;height:40px;}
#slaider_navigation{padding:0px;margin:0px;list-style:none;width:371px;dispaly:block;float:left;}
.navigation_hover{background:url('/img/navigation_hover.png')no-repeat;height:40px;width:398px;position:relative;left:-27px;padding:0px 0px 0px 24px;}
#images_slide{background-image: url("/img/loader.gif");background-repeat: no-repeat;background-position: 50% 50%; width: 477px; height: 240px;float:left;}
#slaider_navigation a{color:#807f7f;text-decoration:none;font-size:12px;font-family:Arial;font-weight:bold;}
#slaider_navigation p{padding:12px 0px 0px 12px;margin:0px;text-align:left;}
.navigation{background:url('/img/navigation.png')no-repeat;height:40px;}
#slaider_navigation{padding:0px;margin:0px;list-style:none;width:371px;dispaly:block;float:left;}
Шаг №3
Вставте саму структуру нашего слайдера в то место где вы его хотите видеть:
Code
<table border="0" cellpadding="0" cellspacing="0" class="slider">
<tr><td align="center">
<div id="images_slide"><img src="тут ссылка на изображение"></div>
<ul id="slaider_navigation">
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
</ul>
</td></tr>
</table>
<tr><td align="center">
<div id="images_slide"><img src="тут ссылка на изображение"></div>
<ul id="slaider_navigation">
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
<li id="тут ссылка на изображение" class="navigation"><p><a href="#">Название вашей картинки ли еще что-то</a></p></li>
</ul>
</td></tr>
</table>
Шаг №4
После html кода слайдера вставим javascript код(вы же можете вынести его в отдельный яваскрипт файл и подключить его)
Code
<script type="text/javascript">
$('#slaider_navigation li').click(function(evenObject) {
$('#images_slide img').hide().attr('src',$(this).attr('id'));
$('#images_slide img').load(function(){
$(this).fadeIn(500);
});
evenObject.preventDefault();
});
$('#slaider_navigation li').hover(function(){
$(this).removeClass('navigation').addClass('navigation_hover');
$('.navigation_hover a').css('color','#fff');
},function(){
$(this).removeClass('navigation_hover').addClass('navigation');
$('.navigation a').css('color','#807f7f');
});
</script>
$('#slaider_navigation li').click(function(evenObject) {
$('#images_slide img').hide().attr('src',$(this).attr('id'));
$('#images_slide img').load(function(){
$(this).fadeIn(500);
});
evenObject.preventDefault();
});
$('#slaider_navigation li').hover(function(){
$(this).removeClass('navigation').addClass('navigation_hover');
$('.navigation_hover a').css('color','#fff');
},function(){
$(this).removeClass('navigation_hover').addClass('navigation');
$('.navigation a').css('color','#807f7f');
});
</script>
Ну вот и все!Приятного использования=)
О материале:
Дата добавления: 28.03.2012 в 09:17
Материал просмотрен: 501 раз
Категория: Скрипты и модификации для uCoz
Оставлены: 0 комментария
Рейтинг материала
По мнению пользователей
0.0
Поделиться
Комментарии
0 комментариев
Навигация
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет