CODEWITHSUNDEEP
javascripthtmlcss
Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Change 'background-image' in 'body' tag after specific time interval

body{
    background-image: "image.jpg";
    }

How can I change the background image suppose 'image1.jpg,image2.jpg...' after 5s.

Found this script on StackOverflow for changing the image, but I also need to change it after few seconds and also Without Click

<script type="text/javascript">
$(document).ready(function() {
    $('body').css('background-image', 'url("image2.jpg")');
});
</script>

Upvotes: 3

Views: 11064

Answers (4)

Musawar ahmed
Musawar ahmed

Reputation: 82

Easy Way To Do Is That with Function run code to chek

function run(interval, frames) {
    var int = 1;
    
    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }
    
    var swap = window.setInterval(func, interval);
}

run(1000, 10); //milliseconds, frames
#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<html>

<body>

<body>



</html>

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

  1. put your urls or img path inside the array, it will loop through every image. started with first one.

  2. use setInterval if you need this keep running forever. (setTimeout will run once per call)

$(document).ready(function() {
  var urls = ['https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg', 'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg', 'https://img.wikinut.com/img/gycf69_-6rv_5fol/jpeg/0/Best-Friends-Img-Src:Image:-FreeDigitalPhotos.net.jpeg', 'http://www.travelettes.net/wp-content/uploads/2014/03/IMG_3829-Medium-600x400.jpg'];

  var cout = 1;
  $('body').css('background-image', 'url("' + urls[0] + '")');
  setInterval(function() {
    $('body').css('background-image', 'url("' + urls[cout] + '")');
    cout == urls.length-1 ? cout = 0 : cout++;
  }, 5000);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Upvotes: 6

G-Cyrillus
G-Cyrillus

Reputation: 105903

you can also use a CSS animation:

body {
  background:url(http://lorempixel.com/400/400/people/1);
  animation: chbg 15s infinite alternate;
  background-size:cover
}
@keyframes chbg {
  0% {
    background:url(http://lorempixel.com/100/100/people/1);
  background-size:cover
  }
  20% {
    background:url(http://lorempixel.com/100/100/people/7);
  background-size:cover
  }
  40% {
    background:url(http://lorempixel.com/100/100/people/6);
  background-size:cover
  }
  60% {
    background:url(http://lorempixel.com/100/100/people/2);
  background-size:cover
  }
  80% {
    background:url(http://lorempixel.com/100/100/people/9);
  background-size:cover
  }
  100% {
    background:url(http://lorempixel.com/100/100/people/8);
  background-size:cover
  }
}

Upvotes: 6

Jordan Georgiadis
Jordan Georgiadis

Reputation: 331

do you mean something like this . You can fill the array of colours with image paths!

var counter=0;
var colours=["red","green","blue"];

$(function() {
    change();

    function change() {
       setTimeout(change,5000);
       
	   $('body').css('background-color', colours[counter] );
	   
	   counter++;
	   
	   if(counter==3){ counter=0;}
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions