Ich möchte das Ändern von BGs reibungslos wie das Verblassen von Sachen machen

Question

Ich habe viele Tage damit verbracht, herauszufinden, wie Hintergrundbildübergänge animiert werden können, aber ich kann keine Lösung finden.Ich bin neu in der Webentwicklung, also sei bitte nicht hart;)

Hier ist ein Beispielcode, den ich von jemand anderem erhalten habe:

var images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
}
window.setInterval(switchImage, 5000);

Dieser Code ändert das Hintergrundbild sofort, aber ich möchte, dass das neue Hintergrundbild eingeblendet wird.

Hier ist ein Link zu der Seite, die ich erstelle:

http://preferredmerchantservices.net/

Ich hoffe, jemand kann mir helfen und danke im Voraus.

Answer 1

Wenn Sie nicht zu viel Zeit verlieren möchten, um sich selbst herauszufinden, sollten Sie eine Bibliothek wie jQuery .Damit ist es nur eine Frage von fadeIn() und fadeOut().

Da Sie ein Anfänger in der Webentwicklung sind, müssen Sie wissen, dass jQuery eine sehr beliebte Bibliothek ist, die heutzutage fast jeder verwendet.Damit können Sie weniger Code schreiben und mehr tun.

Am wichtigsten ist jedoch, dass die Cross-Browser-Kompatibilität gewährleistet ist.

Answer 2

Sehen Sie sich diese Frage an:

Einblenden eines Hintergrundbilds

Hier ist ein Link, der erklärt, wie ein Überblendungsübergang mit jQuery durchgeführt wird:

http://jqueryfordesigners.com/image-loading/

Wenn Sie die jQuery-Bibliothek benötigen, können Sie diesen Code in Ihre Seite einfügen:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>