Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   slider jquery своими руками (https://javascript.ru/forum/dom-window/40723-slider-jquery-svoimi-rukami.html)

imediasun1 17.08.2013 11:57

slider jquery своими руками
 
С помощью форумчан я сделал вот такой простенький слайдер, но как добавить здесь автоматическую смену картинок через некоторое время через тот же 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 18.08.2013 13:27

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

Deff 18.08.2013 20:22

imediasun1,

Могу дать готовый Вариант => http://javascript.ru/forum/jquery/34...-jquery-4.html

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

ruslan_mart 19.08.2013 12:19

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

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

simonellez 31.08.2013 03:17

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

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

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

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

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

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


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

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

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


Часовой пояс GMT +3, время: 14:09.