Aol.com home page is changing the background image on every refresh, quite interesting. So how to apply this kind of effect to your web project, take a quick look this post. It’s simple just five lines of javascript code. Use it and enrich your web project user interface.
The tutorial contains a folder called bgimages with background images files.
index.html
bgimages
-- 1.jpg
-- 2.jpg
-- 3.jpg
-- ....
-- ....Javascript
Here variable totalCount is the number of backgrounds. The Math.random() method returns a random number between 0 and 1 and the Math.ceil() method rounds a number towards to the nearest integer, and returns the result.
<html>
<head>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>
</head>
<body>
// Page Design
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
