CSS3 Diashow Fade-Effekt funktioniert nicht

http://jsfiddle.net/pdb4kb1a/2/CSS3 Diashow Fade-Effekt funktioniert nicht

Der Code ganz gut auf JSFiddle funktioniert, aber ich kann es nicht zu arbeiten, wenn ich es in einer HTML/CSS-Datei verwenden. Nur das 50x200 Bild wird angezeigt, keine Anzeichen für die einfache Diashow oder den Fade-Effekt. Ich arbeite in Sublime Text, könnte das irgendwelche Probleme verursachen?

var imgArray = [ 
 
    'http://placehold.it/300x200', 
 
    'http://placehold.it/200x100', 
 
    'http://placehold.it/400x300'], 
 
    curIndex = 0; 
 
    imgDuration = 3000; 
 

 
function slideShow() { 
 
    document.getElementById('slider').className += "fadeOut"; 
 
    setTimeout(function() { 
 
     document.getElementById('slider').src = imgArray[curIndex]; 
 
     document.getElementById('slider').className = ""; 
 
    },1000); 
 
    curIndex++; 
 
    if (curIndex == imgArray.length) { curIndex = 0; } 
 
    setTimeout(slideShow, imgDuration); 
 
} 
 
slideShow();

#slider { 
 
    opacity:1; 
 
    transition: opacity 1s; 
 
} 
 

 
#slider.fadeOut { 
 
    opacity:0; 
 
}

<body> 
 
<img id="slider" src="http://placehold.it/50x200"> 
 
</body>

Quelle

2016-08-13 sirenleader

Zeigt die Konsole irgendwelche Fehler? Zeigen Sie uns die HTML - Datei, die Sie erstellt haben? – Script47

Hier scheint es, als ob es gut funktioniert JavaScript in Ihrer HTML-Datei? – andreas

JSFiddle führt den Javascript-Code in der window.onload Ereignis. Sie können dies ändern, wenn Sie im Editor von JSFiddle auf die JavaScript-Schaltfläche klicken. Wenn Sie es in No wrap - in <head> ändern, werden Sie sehen, dass es nicht so gut funktioniert. Sie sollten einen Fehler in Ihrer Konsole sehen, der Ihnen den Grund angibt.

Ich gehe davon aus, dass Sie das Skript-Snippet in den Abschnitt head Ihres HTML-Dokuments einfügen.

Wenn Sie Ihren Code nehmen, wie in Ihrer Frage gestellt, Ihre slider ist noch nicht geladen, weil das Skript ausgeführt wird, bevor das HTML-Dokument vollständig geladen ist. Sie haben den Anruf an Ihre slideShow Funktion innerhalb des onload Ereignis zu wickeln (oder wenn Sie jQuery verwenden werden Sie wahrscheinlich $(document).ready(function(){ ... }) stattdessen

Diese den Trick tun sollten dann:.

window.onload = function() { 
    slideShow(); 
}

einschließlich der Das Skript am unteren Rand Ihres HTML - Dokuments sollte genauso funktionieren wie eine Alternative.

Quelle

2016-08-13 18:33:27 lexith

Danke, dass fi gefestigt es. Es machte keinen Unterschied, ob es in der oder war, es hat die gleichen Ergebnisse! – sirenleader

Gern geschehen. Am Ende deines Körpers? Mh, das ist seltsam. Funktioniert auch in Ihrer Geige, wenn Sie das Skript so einstellen, dass es in den Body aufgenommen wird. – lexith

CSS3 Diashow Fade-Effekt funktioniert nicht

Antwort

Verwandte Themen