Cambiare l'immagine di sfondo con JavaScript

window.onload = function() {
sfondo() }

function sfondo() {
var cl = document.getElementById('main1');

if (cl.className == "") {
cl.className = "in"; }
else if (cl.className == "in") {
cl.className = "in1"; }
else if (cl.className == "in1") {
cl.className = "in2"; } 
else if (cl.className == "in2") {
cl.className = "in3"; } 
else if (cl.className == "in3") {
cl.className = "in4"; } 
else if (cl.className == "in4") {
cl.className = "in5"; } 
else { cl.className = "in"} 
}
x = window.setInterval("sfondo()", 5000);


.in1
{
width: 100%;
background: url(images/sitebg1.jpg) no-repeat bottom left fixed;

.in1
{
width: 100%;
background: url(images/sitebg1.jpg) no-repeat bottom left fixed;

}
.in2
{
width: 100%;
background: url(images/sitebg2.jpg) no-repeat bottom left fixed;

}
.in3
{
width: 100%;
background: url(images/sitebg3.jpg) no-repeat bottom left fixed;
ecc...

 Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

<style type="text/css" media="screen">
#slider {
    width: 160px; /* important to be same as image width */
    height: 120px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
#sliderContent {
    width: 100%; /* important to be same as image width or wider */
    height: 100%; /* important to be same as image height */
    position: absolute;
    top: 0;
    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}
.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 0px;
    width: 100%;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
    clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
img {
    width: 100%; /* important to be same as image width */
    border: 0px;
}
</style>

.sliderImage {
    float: left;
    position: relative;
    display: none;
    width:100%;
    height:100%;
    text-align:center;
    
}
.sliderImage span {
  position: absolute;
  font: 10px/15px Arial, Helvetica, sans-serif;
  padding: 5px;
  width: 100%;
  background-color: #000;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  color: #fff;
  display: none;
  text-align:left;
}