I need to create my own image slider by changing the background image of a div. I have done this but want to add a fade in/out transition effect.
So far I have:
var now = 0;
var int = self.setInterval("changeBG()", 5000);
var array = ["[[*HomeImage1]]", "[[*HomeImage2]]", "[[*HomeImage3]]", ];
function changeBG(){
now = (now+1) % array.length ;
$('.heroslide').fadeOut(300).delay(1000).css('background-image', 'url("' + array[now] + '")');
$('.heroslide').fadeIn(300);
}
But try as I might I cannot get the transitions and css change to work in the right order.
Can anyone point me in the right direction?
You should try to use a recursive function:
var now = 0;
var int = self.setInterval("changeBG()", 5000);
var array = ["[[*HomeImage1]]", "[[*HomeImage2]]", "[[*HomeImage3]]", ];
function changeBG(){
now = (now+1) % array.length ;
// Fade out
$('.heroslide').animate({opacity:0}, function(){
// Change, fade in, trigger function after 5 seconds again.
$('.heroslide')
.css('background-image', 'url("' + array[now] + '")')
.animate({opacity:1}, function(){
setTimeout(changeBG, 5000);
});
});
}
Now just call changeBG() once to start animating!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다