A Simple Background Changer With Javascript

I spent 5 minutes for script and 10 minutes for this post

I just wrote a basic code that changes background of webpage. Here i’m writing code down:

var imgArray = ["url(img/1.jpg)", "url(img/2.jpg)", "url(img/3.jpg)"]; var counter = 0; setInterval(change, 7000); function change() { document.body.style.backgroundImage = imgArray[counter]; counter++; if(counter >= imgArray.length) { counter = 0; } };

What i did here is simple. A variable named imgArray is an array and taking 3 different img urls. Then a variable named counter is set to 0 so later when i use it timer will start from 0. After that i used “setInterval” method to start timer. “change” is a function which means to change from 0 to 7000 miliseconds. After that i wrote change function to make it effecting body element to imgArray’s elements. “counter++” is making counter’s integer value to increase. right after that last line means that if counter is greater than or equal to imgArray’s lenght (which is 7000) than counter will set to 0 again and all that shit will start over. Why i made a post for that very simple script is a great mystery. Being bored at the moment might be the reason, or fill this blog with some stuff so i look i'm doing some serious business.

body { background-image: url(img/3.jpg); background-position: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-trasition: all 2s ease-in-out; transition: all 2s ease-in-out; }

I also set transitions via css so its much good looking.