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

Question

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/

Can we see your HTML structure too? It's a little difficult to help from just the jQuery. — BurningLights
– BurningLights, Commented Aug 9, 2015 at 13:22

bashleigh · Accepted Answer · 2015-08-09 14:21:07Z

1

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 :)

edited Aug 9, 2015 at 14:21

answered Aug 9, 2015 at 13:45

bashleigh

9,4245 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bashleigh Over a year ago

which bit don't you get? :) basically you want to do automation of images correct? On a button press you want to go 1,2,3 and the reverse for another? Am I right?

Imnotapotato Over a year ago

no.. swap between images by clicking the arrows + images move automatically

bashleigh Over a year ago

ahhhh I see ok I'll change my answer n_n give me a sec

bashleigh Over a year ago

@ElectricWizard changed my answer for you :)

scarto · Accepted Answer · 2015-08-09 13:34:37Z

0

.main {
    -webkit-transition: background .7s linear;
       -moz-transition: background .7s linear;
         -o-transition: background .7s linear;
        -ms-transition: background .7s linear;
            transition: background .7s linear;
}

Of course .main div has to have height and width.

This css code make background change with transition, more about imagetransitions here : http://css3.bradshawenterprises.com/cfimg/

answered Aug 9, 2015 at 13:34

scarto

946 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related