Hallo Zusammen,
ich möchte gerne eine Slideshow mit wenigen Bildern in meinem Headder(mit html, css und js) realisieren.
Leider wechseln die Bilder nicht ineinander, sondern erst in den background und dann zum nächsten Bild!
kann mir jemand weiter helfen?
CSS
<!DOCTYPE html>
<head>
<style type ="text/css">
#wss{
opacity:0;
-webkit-transition:opacity 1s linear 0s;
transition: opacity 1s linear 0s;
}
</style>
<script>
var wss_i = 0;
var wss_array = [
"<img src='pics/1.jpg'>",
"<img src='pics/2.jpg'>",
"<img src='pics/3.jpg'>",
"<img src='pics/4.jpg'>",
"<img src='pics/5.jpg'>"
];
var wss_elm;
function wssNext() {
wss_i++;
wss_elm.style.opacity = 0;
if(wss_i > (wss_array.length - 1)){
wss_i = 0;
}
setTimeout ('wssSlide()',1000)
}
function wssSlide() {
wss_elm.innerHTML = wss_array[wss_i]
wss_elm.style.opacity = 1;
setTimeout('wssNext()',8000);
}
</script>
</head>
<body>
<img id="wss"></img>
<script>
wss_elm = document.getElementById("wss"); wssSlide();
</script>
</body>
</html>
Alles anzeigen