KoVimedia: Slider

Beitrag lesen

#contentslider {  
	position:absolute;  
	top:0px;  
	width: 960px;  
	height: 444px;  
	background:url(images/contentlayer.png);  
	background-repeat:no-repeat;  
	right: 0px;  
	left: 0px;  
	z-index:2;  
  
}
  
<head>  
<link rel="stylesheet" href="layout.css" type="text/css" media="screen"/>  
<script language="JavaScript1.2" type="text/javascript" src="diashow.js"></script>  
</head><body>  
    <div id="contentslider"></div>  
</body>  
</html>  

var bgimages=new Array();  
var pathToImg=new Array();  
var inc=-1;  
bgimages[0] = "http://www.domain.de/images/contentlayer4.png"  
bgimages[1] = "http://www.domain.de/images/contentlayer3.png"  
bgimages[2] = "http://www.domain.de/images/contentlayer2.png"  
bgimages[3] = "http://www.domain.de/images/contentlayer.png"  
  
  
//Images vorladen  
for (i=0; i < bgimages.length; i++) {  
        pathToImg[i]=new Image();  
        pathToImg[i].src=bgimages[i];  
}  
  
function bgfade() {  
        if (inc < bgimages.length-1) {  
                inc++  
        } else {  
                inc=0  
        }  
        document.getElementById("contentslider").style.backgroundImage = "url("+pathToImg[inc].src+")";  
        fade();  
}  
  
function fade(step) {  
        step = step || 0;  
        document.getElementById("contentslider").style.opacity = step/0;  
        document.getElementById("contentslider").style.filter = "beta(opacity=" + step + ")";  
        step = step + 2;  
        if (step <= 0) {  
                window.setTimeout(function () { fade(step); }, 1);  
        } else {  
                step = 0;  
        }  
}  
  
if (document.all||document.getElementById) window.onload=new Function('setInterval("bgfade()",4000)')

Ich hab folgendes Problem.. ich würde gerne den übergang zum 2 Hintergrundbild sanfter machen.. also leich verblassen und das nächste wird eingeblendet.. weiss jemand wie ich das anstelle?