Компактный слайдер работающий автоматически
Слайдер хоть и маленький но может прокручивать любое количество изображений.У слайдера нет кнопок управления,он работает автоматически.Работать он будет только на динамических страницах (типа главной),в материалах модулей он будет работать не на всех сайтах.На меняющиеся в нём картинки можно прикрепить ссылки и использовать в качестве своеобразного меню.Картинки желательно применять с размерами 320Х240,для изменения разрешения изображений можете воспользоваться специальной программой предназначеной для уменьшения размеров.Программа не сложная,на сайте есть виде по работе с ней. Кстати можно изменить и фоновую картинку слайдера и его размеры на нужные,в нижней части есть редактор для экспериментов с кодами примеров - не забудьте воспользоваться.Если что то не понятно или существуют какие либо предложения,используйте формы комментариев.
Код
<style>
#dsminigalerea {
padding:0;
margin:0;
list-style-type:none;
position:relative;
overflow:hidden;
width:396px;
height:396px;
margin:0 auto 20px auto;
background:url(http://delaisait.ucoz.ru/script/img/1/galerea/fondsminigalerea.jpg);
}
#dsminigalerea img {
border:0;
}
#dsminigalerea li {
float:left;
width:396px; height:396px;
display:none;
}
#dsminigalerea li a {display:block; width:396px; height:396px; border:0;}
#dsminigalerea li a img {
display:block;
border:0;
}
#dsminigalerea li a img.landscape {
margin:74px auto;
border:4px solid #fff;
border-width:1px 4px;
border-color:#444 #ccc #fff #ccc;
}
#dsminigalerea li a img.portrait {
margin:34px auto;
border:4px solid #fff;
border-width:4px 1px;
border-color:#444 #ccc #fff #ccc;
}
#dsminigalerea li.current {display:block;}
</style>
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/js/1/galerea/dsminigalerea.js"></script>
<ul id="dsminigalerea">
<li class="current"><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_1.jpg" alt="Композиция-1" title="Композиция-1" /></a></li>
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_2.jpg" alt="Композиция-2" title="Композиция-2" /></a></li>
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_3.jpg" alt="Композиция-3" title="Композиция-3" /></a></li>
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_4.jpg" alt="Композиция-4" title="Композиция-4" /></a></li>
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_5.jpg" alt="Композиция-5" title="Композиция-5" /></a></li>
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_6.jpg" alt="Композиция-6" title="Композиция-6" /></a></li>
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_7.jpg" alt="Композиция-7" title="Композиция-7" /></a></li>
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_8.jpg" alt="Композиция-8" title="Композиция-8" /></a></li>
</ul>
|