This is my code, to see it in action, take a look at this Fiddle

HTML

<div id="header">
.
.
.
</div>

CSS

#header {
background: url(images/img8681.jpg);
background-size: cover;
border-bottom: 8px solid #333333;
height: 620px;
}

Javasript (jQuery)

var imgs = new Array("images/img8681.jpg","","","","");

function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#header').css('background-image', 'url(' + imgUrl + ')');
}

setInterval(changeBg,5000);

My question how can I have the change of the images smoothly instead of "just replace" ? And how to avoid continuously appear of the same image ?

This is my code, to see it in action, take a look at this Fiddle

HTML

<div id="header">
.
.
.
</div>

CSS

#header {
background: url(images/img8681.jpg);
background-size: cover;
border-bottom: 8px solid #333333;
height: 620px;
}

Javasript (jQuery)

var imgs = new Array("images/img8681.jpg","","","","");

function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#header').css('background-image', 'url(' + imgUrl + ')');
}

setInterval(changeBg,5000);

My question how can I have the change of the images smoothly instead of "just replace" ? And how to avoid continuously appear of the same image ?

• javascript
• jquery

2 Answers 2

You can get a smoother change of the image if you use the fadeIn and fadeOut functions.

var imgs = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");
function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#header').css('background-image', 'url(' + imgUrl + ')');
    $('#header').fadeIn(1000); //this is new, will fade in smoothly
}

function changeBackgroundSmoothly() {
    $('#header').fadeOut(1000, changeBg); //this is new, will fade out smoothly
}

setInterval(changeBackgroundSmoothly,5000);

See this Fiddle to see the result.

Concerning the randomness of the images you can't do a lot if it does have to be random. Simply because random implies that the same image might appear twice in a row, otherwise it wouldn't be totally random as you could exclude one result.

A solution might be to not display the images randomly, but rather in a predefined sequence, refer to this site for an example.

Just another approach

$("#header").fadeOut(500, //Speed
                     function () { //On fadeOut plete
                            $(this).css("background-image", "url(img2.jpg)") //Change BG
                                   .fadeIn(); //FadeIn
                     });

You can check here: https://jsfiddle/rafaelaca/wwjro184/