Маленький слайдер для автоматической смены картинок - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Слайдер для сайта uCoz » Маленький слайдер для автоматической смены картинок

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Маленький слайдер для автоматической смены картинок

Компактный слайдер работающий автоматически


Слайдер хоть и маленький но может прокручивать любое количество изображений.У слайдера нет кнопок управления,он работает автоматически.Работать он будет только на динамических страницах (типа главной),в материалах модулей он будет работать не на всех сайтах.На меняющиеся в нём картинки можно прикрепить ссылки и использовать в качестве своеобразного меню.Картинки желательно применять с размерами 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>



Проверьте пример кода в редакторе

Вставьте код для установки в HTML редактор и проверьте.












Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3192 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: слюдер, юкоз, uCoz, на сайт, Для сайта, sluder, small

    Всего комментариев: 5
    0   Спам
    5 rodina_irina1964   (31.10.2014 19:31)
    Аватар rodina_irina1964 И где найти кнопку, чтобы в таблице "При нажатии на фото/кличку котенкаВы попадете к нему на страничку"? Соответственно, нажимаем и попадаем в фотоальбом именно этого котенка

    0   Спам
    3 Admin9349   (14.10.2013 09:24)
    Аватар Admin9349 Здравствуйте!
    Вариант 2 и если можно, чтобы он был адаптирован под Ucoz.
    Спасибо.

    0   Спам
    4 IZOTOP   (24.10.2013 21:04)
    Аватар IZOTOP Материал со слайдером Roundabout находится здесь.

    0   Спам
    1 Admin9349   (11.10.2013 13:14)
    Аватар Admin9349 Добрый день. А вы можете в своей коллекции разместить слайдер для установки на своём сайте такого типа, который поставлен на данном сайте http://fond-edin.ru/

    0   Спам
    2 IZOTOP   (12.10.2013 20:48)
    Аватар IZOTOP Здравствуйте!
    Ответьте поподробнее, а лучше выберите из вариантов:

    1.Это Ваш сайт, Вы хотите поделиться с пользователями своим слайдером но не уверены что понимаете как сделать собственный материал для размещения.
    2.Вам понравился этот слайдер, Вы хотите чтобы материал с таким слайдером был создан на этом сайте.

    Если сайт Ваш, мне довелось лицезреть вёрстку HTML с ошибками, для рассмотрения ошибок нужно будет сделать заказ статьи, ошибки будут подробно описаны в статье.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]