☰
✕
Главная
© 2002 - 2025
Diary.ru
Fade Slider
netcat-na-diary
| четверг, 02 апреля 2015
HTML
<ul id="slider1" class="images-list"> <li style="background: red">11</li> <li style="background: green">22</li> <li style="background: blue">33</li> </ul> <ul class="controls"> <li class="active"></li> <li></li> <li></li> </ul>
jQuery
$.fn.slider = function () { var $this = this; var $controls = $this.nextAll('.controls').first(); var index = 0; var n = 2; $this.find('li:gt(0)').hide(); setInterval(function () { $this.find('li:first-child').fadeOut('slow') .next('li').fadeIn('slow') .end().appendTo($this); if ($controls.find('li.active').next('li').length) { $controls.find('li.active').removeClass('active').next('li').addClass('active'); } else { $controls.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active'); }; }, 4000); }; $('#slider1').slider();
http://jsfiddle.net/u9d3xa1q/17/
С индексами
http://jsfiddle.net/9a24rdro/2/
Ссылки
Верстка
jQuery
Plugins
Fade Slider
Смотрите также
Сны
Библионочь
Чепига, не останавливайся!
Кошка Сашка — Маяк Междумирья
Гиппеаструм белый на кухне
Новости мирной жизни