Опыт. Нативный слайдер с помощью jQuery

§ 275

Довольно часто возникает необходимость в крутилке слайдов на главной странице сайта. Подключать плагин не хочется, ведь всего-то нужно пролистать несколько картинок или текстовых кусков, и разумеется с паузой при наведении мыши.

Нативный слайдер для jQuery

Разметка:

<div id="anidiv"> 
 <p>Slide 1</p>
 <p>Slide 2</p>
 <p>Slide 3</p>
 <p>Slide 4</p>
</div>

Скрипт:

$('#anidiv p').hide();
InOut($('#anidiv p:first'));
function InOut(elem) {
  elem.delay().fadeIn(600).delay(5000).fadeOut(600, function() {
  if (elem.next().length > 0) {
  InOut($(this).next());
  }
  else {
   InOut($(this).siblings(':first'));
  }
 });
}
$('#anidiv p').mouseover(function() {
  $(this).stop(true, true);
});
$('#anidiv p').mouseout(function() {
  if ($(this).is(":visible") == true) {
  InOut($(this));
  }
});

И все! Демо можно посмотреть тут.