How to apply JQuery fade functionality to between changing the background Images?

Question

I want to add jquery fade() functionality so that images changes with fade.
The problem is I want these images in sequence, not randomly.

<html>
<head>
<script type="text/javascript">
 window.onload = function () {
    var backgroundImg=["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA",
                    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBinSpWOvAtkxjmkf709O3rjH2ObRbWAEn9s0JcWaeL6LMtCbOrQ",
                    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKY4J2qIFqkuDnABMzeypywbMSZL1cleS8vpySz0KD02wOYORU1g",
                    "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQkdQT0zN0xDVP-VuvwojSbS5dOstX14eZvJCOWNPxKJ5dWTIc"
    ]
    setInterval(changeImage, 1000);
    var i = 0;
    function changeImage() {   
      document.getElementById('slide').style.backgroundImage = "url('"+backgroundImg[i]+"')";
      i++; 
      if(i == 4){
        i = 0;
      }
    }
  }
</script>
</head>
<body>
    <div id="slide" style="width: 400px; height: 400px;"></div>
</body>
</html>

Possible duplicate of [Change the body background image with fade effect in jquery](https://stackoverflow.com/questions/20255903/change-the-body-background-image-with-fade-effect-in-jquery) — stdob--, Aug 18 '18 at 13:59

score 1 · Answer 1 · answered Aug 18 '18 at 14:02

1

Remove var i = Math.floor((Math.random() * 3)); and add var i = 0; outside the function, then inside the function increment the i value until it reaches 4, then get it back to 0. like this :

setInterval(changeImage, 1000);
var i = 0;
function changeImage() {   
   document.getElementById('slide').style.backgroundImage = "url('"+backgroundImg[i]+"')";
   i++; if (i == 4){i = 0;}
}

answered Aug 18 '18 at 14:02

Ezzat Rashed

46
5

Rasheed Sir Yes its working, thank you so much, also what about fade(); functionality ? – Jamie Southwell Aug 18 '18 at 14:10
you can use the same code but with a small change from `document.getElementById('slide').style.backgroundImage = "url('"+backgroundImg[i]+"')";` to `$('#slide').fadeIn(500).css("background-image", "url('"+backgroundImg[i]+"')").fadeOut(500);` – Ezzat Rashed Aug 18 '18 at 14:31
and of course you can tweak it a little to your preference. – Ezzat Rashed Aug 18 '18 at 14:32
1

Nice answer, but let's tweak it. Instead of i++; if (i == 4){i = 0;} use (i = ((i + 1) % 4)); – Lajos Arpad Aug 18 '18 at 15:28

score 0 · Answer 2 · answered Aug 18 '18 at 14:27

JQuery can only fade Html-Elements. So you need add the images as html-tag ()

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        var backgroundImg=[ "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA",
                            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBinSpWOvAtkxjmkf709O3rjH2ObRbWAEn9s0JcWaeL6LMtCbOrQ",
                            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKY4J2qIFqkuDnABMzeypywbMSZL1cleS8vpySz0KD02wOYORU1g",
                            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQkdQT0zN0xDVP-VuvwojSbS5dOstX14eZvJCOWNPxKJ5dWTIc"];
</script>
</head>
<body>
    <div id="slide" style="width: 400px; height: 400px;"></div>
</body>
<script>
$(document).ready(function(){
    for(let i=0; i<backgroundImg.length; i++){
        $("#slide").append("<img src='"+backgroundImg[i]+"' alt='pic_"+i+"' style='position: absolute; display:none;' />");
    }
    $("#slide img:nth-child(1)").show();

    let pic = 0;
    setInterval(function(){
        next = pic+1;
        if(pic == backgroundImg.length-1){
            next = 0;
        } else if(pic == backgroundImg.length) {
            pic = 0;
            next = 1;
        }
        $("#slide img:nth-child("+(pic+1)+")").fadeOut();
        $("#slide img:nth-child("+(next+1)+")").fadeIn();
        pic++;
    }, 1000);
});
</script>
</html>

I'm sure, someone could do this better but it works.

How to apply JQuery fade functionality to between changing the background Images?

2 Answers2