Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.145.75.238
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Форум общения - Logical-portal » Урна » Собрание скриптов uCoz » Отличный слайдер картинок с замечательными эффектами переход
Отличный слайдер картинок с замечательными эффектами переход
Сообщение оставлено 14.07.2011 в 07:07:08 | Сообщение #1
200

Замечательный слайдер с кучей всевозможных красивых переходов украсит любой уголок вашего сайта.

Установка:

После /head на нужных страницах вставляйте:

Code
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />     
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />     
<script src="/js/cufon-yui.js" type="text/javascript"></script>     
<script src="/js/Museo_Slab.font.js" type="text/javascript"></script>     
<script src="/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>     
         
<script type="text/javascript">     
Cufon.replace('h2', { fontFamily:'Museo Slab' });     
Cufon.replace('h3', { fontFamily:'Museo Slab' });     
         
$(window).load(function() {     
     $('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });     
     setTimeout(function(){     
     $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });     
     }, 1000);     
     setTimeout(function(){     
     $('#slider3').nivoSlider({     
     pauseTime:5000,     
     pauseOnHover:false,     
     controlNavThumbs:t rue     
     });     
     }, 2000);     
     setTimeout(function(){     
     $('#slider4').nivoSlider({     
     effect:'random',     
     animSpeed:1500,     
     pauseTime:5000,     
     s tartSlide:2,     
     directionNav:false,     
     controlNav:true,     
     keyboardNav:false,     
     pauseOnHover:false     
     });     
     }, 3000);     
});     
</script>


Следующий код в то место, где будет сам слайдер:

1) Первый слайдер:

Code
<div style="width:550;height:220;" id="slider1" class="nivoSlider">     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
</div>


2) Второй слайдер:

Code
<div style="width:550;height:220;" id="slider2" class="nivoSlider">     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
</div>

3) Третий слайдер:

Code
<div style="width:550;height:220;" id="slider3" class="nivoSlider">     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
</div>


4) Четвёртый слайдер:

Code
<div style="width:550;height:220;" id="slider2" class="nivoSlider">     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
<img src="Ссылка на картинку" alt="Описание" />     
</div>

Не забываем загрузить файлы себе на сайт
Cкачать!
 
 
   
Форум общения - Logical-portal » Урна » Собрание скриптов uCoz » Отличный слайдер картинок с замечательными эффектами переход
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика