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,
Могу дать готовый Вариант => http://javascript.ru/forum/jquery/34...-jquery-4.html Или просто идею: cтавим setInterval, который периодически запускает функцию отслеживания наведения юзера на блок со слайдером, если курсор наведен, отслеживания убирается для следущего раза, если нет, запускает автоплей, который одновременно смотрит и наведение курсора, при наведении, автоплей сбрасывается |
Можно как-нибудь так:
var sliderTime; $('.slider_img').hover(function() { sliderTime = setInterval(function() { slider(true); }, 3000); }, function() { clearInterval(sliderTime); }); |
предлагаю вот такой слайдер.
В нём я сделал так: у родительского элемента: 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. |