Rick Sanchez Rick Sanchez - 5 months ago 26
jQuery Question

How to change background-image using jQuery every X seconds (with fade)

I have a built page which I cant really touch the HTML structure so read carefully:

First:

That page I have has a

background-image: url('main-1.jpg');
I want it to change every 3 seconds to main-2.jpg and main-3.jpg.

Second:

I have two arrow buttons on the sides of the page with the classes:
l-arrow
(left-arrow) and
r-arrow
(right-arrow).

All image changes have to include the fade effect in them somehow!

I can't stack images on each other since it's the main div

This is the jQuery I have till now and even now, the buttons aren't working:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var count = 1;

$(".r-arrow").click(function{
if ( count == 1 ) {
count = 2;
$('.main').css("background-image", "url(main-2.jpg)");
} else if (count == 2) {
count == 3;
$('.main').css("background-image", "url(main-3.jpg)");
} else if (count == 3) {
count == 1;
$('.main').css("background-image", "url(main-1.jpg)");
}
console.log(count);
})

$(".l-arrow").click(function{
if ( count == 1 ) {
count = 3;
$('.main').css("background-image", "url(main-3.jpg)");
} else if (count == 2) {
count == 1;
$('.main').css("background-image", "url(main-1.jpg)");
} else if (count == 3) {
count == 2;
$('.main').css("background-image", "url(main-2.jpg)");
}
})


});

</script>


What can be the problem ?

I added a jsfiddle as example: http://jsfiddle.net/4eyv7td9/

Answer

why not do an animation then change the background image and reanimate in?

function changeImages(direction){
    switch(direction){
    case"left":
        for(i=3;i==0;i--){
            $('.main').animate({'opacity':0},500,function(){$(this).css({'background-image':'url("main-'+i+'.jpg")'}).animate({'opacity':1},500);});
        }
    break;
    case"right":
        for(i=0;i<=3;i++){
            $('.main').animate({'opacity':0},500,function(){$(this).css({'background-image':'url("main-'+i+'.jpg")'}).animate({'opacity':1},500);});
        }
    break;
    }
}
$('.r-arrow').click(changeImages('right'));
$('.l-arrow').click(changeImages('left'));
//you may want to write it like this instead if you're using an anchor? 
$('.r-arrow').click(function(e){
    e.preventDefault();
    changeImages('right');
});

EDIT

Sorry I misunderstood what you was trying to do. Here a function that will get the current image and change accordingly to direction :)

function changeImageByButton(direction){
    int current=$('.main').css('background-image').split('-');//split main-1.jpg into 'main' '1.jpg' making int will force 1
    swtich(direction){
        case"left":
            if(current==1)return;//cannot go any further
            current--;
        break;
        case"right":
            if(current==3)return;
            else current++;
        break;
    }
    $('.main').css({'background-image':'url("main-'+current+'.jpg")'});
}

Now what this function will do, if $('.main').css('background-image') = 'main-2.jpgand we call the function withchangeImagesByButton('left')` then current will = 1 and change the image.

If we call the function with 'left' and the current image is main-1.jpg the function will return and not do anything :)

Comments