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, время: 23:42. |