slider jquery своими руками

[imediasun1]

С помощью форумчан я сделал вот такой простенький слайдер, но как добавить здесь автоматическую смену картинок через некоторое время через тот же fadeIn()?

<div id="slider_area">
<div id="circle_left" onclick="slider(false)" class="circle"><span><</span></div>
<div id="circle_right" onclick="slider(true)" class="circle"><span>></span></div>
<div id="wight_area"></div>
<div class="slider_img">
<img  src="/uploads/usertemplates/S_Oliver_Fall_Winter_2012_2.png" height="590" width="947">
</div>
<div class="slider_img">
<img  src="/uploads/usertemplates/slider1.png" height="590" width="947">
</div>
</div><!--slider_area-->

var sliderIndex = -1, imgs = $('.slider_img img');
	 
	function slider(a) {
	   sliderIndex += a ? 1 : -1;
	   if(!imgs[sliderIndex]) sliderIndex = a ? 0 : imgs.length -1;
	   imgs.css('display', 'none');
	   imgs.eq(sliderIndex).fadeIn("slow");
}

[imediasun1]

Неужели никто не знает как это сделать?

[Deff]

imediasun1,

Могу дать готовый Вариант => Слайд шоу на библиотеке jQuery

Или просто идею:
cтавим setInterval, который периодически запускает функцию отслеживания наведения юзера на блок со слайдером, если курсор наведен, отслеживания убирается для следущего раза, если нет, запускает автоплей, который одновременно смотрит и наведение курсора, при наведении, автоплей сбрасывается

[ruslan_mart]

Можно как-нибудь так:

var sliderTime;

$('.slider_img').hover(function() {
   sliderTime = setInterval(function() {
      slider(true);
   }, 3000);
},
function() {
   clearInterval(sliderTime);
});

[simonellez]

предлагаю вот такой слайдер.

В нём я сделал так:

у родительского элемента: position: relative;

у дочерних элементов (картинок) position: absolute;

дальше всё просто:

$("div.parent").append(
  $("<img>").attr("src","my new image").css("opacity","0").fadeIn(1000,function(){
    $(this).prev().remove();
  })
);

за счёт того что у родителя относительное позиционирование все внутренние элементы с абсолютным будут сдвинуты в левый верхний угол.

Затем создается картинка (по умолчанию она будет выше предыдущей) полностью прозрачная, и при помощи fadeIn появляется через 1 сек.

После того как она полностью появится - предыдущая картинка удаляется.