Главная » Файлы » Прочие скрипты » jQuery

Слайдер с автоскроллингом на jQuery
22.06.14, 20:08:17

Скачать файл




Замечательный слайдер, в котором прокручиваются элементы с заданным интервалом. Прекрасно подходит для прокрутки баннеров и друзей сайта smile

Установка:

На страницах, где будет использоваться данный скрипт в head вставляйте:
Код
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>  
  <link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />  
  <script type="text/javascript">  

  function mycarousel_initCallback(carousel)  
  {  
// Disable autoscrolling if the user clicks the prev or next button.  
carousel.buttonNext.bind('click', function() {  
carousel.startAuto(0);  
});  

carousel.buttonPrev.bind('click', function() {  
carousel.startAuto(0);  
});  

// Pause autoscrolling if the user moves with the cursor over the clip.  
carousel.clip.hover(function() {  
carousel.stopAuto();  
}, function() {  
carousel.startAuto();  
});  
  };  

  jQuery(document).ready(function() {  
jQuery('#mycarousel').jcarousel({  
auto: 3,  
wrap: 'last',  
initCallback: mycarousel_initCallback  
});  
  });  

  </script>


Здесь у нас в самом конце кода:
...
jQuery('#mycarousel').jcarousel({
auto: 3,
wrap: 'last',
...

auto: 3 отвечает за время задержки скроллинга (В секундах)

Далее в то место, где хотите расположить сам слайдер:
Код
<ul id="mycarousel" class="jcarousel-skin-tango">  
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>  
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>  
</ul>


Картинки, естественно, заменяйте на свои.

Всё smile Пример работы скрипта можете посмотреть ЗДЕСЬ

P.S. На случай выхода приведённых ссылок из строя прикрепляю скрипт, css и стрелочки в архиве smile

Категория: jQuery | Добавил: Apocalypse | Теги: на, JQuery, автоскроллингом, слайдер
Просмотров: 342 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: