vuoi rendere il cambio di bgs senza intoppi come roba in dissolvenza
-
29-10-2019 - |
Domanda
Ho passato molti giorni a cercare di capire come animare le transizioni delle immagini di sfondo, ma non riesco a trovare una soluzione.Sono nuovo nello sviluppo web, quindi non essere duro;)
Ecco un codice di esempio che ho ricevuto da qualcun altro:
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);
Questo codice cambia immediatamente l'immagine di sfondo, ma voglio che la nuova immagine di sfondo si dissolva in apertura.
Ecco un collegamento alla pagina che sto creando:
http://preferredmerchantservices.net/
Spero che qualcuno possa aiutarmi e grazie in anticipo.
Soluzione
Se non vuoi perdere troppo tempo cercando di capire da solo, dovresti usare una libreria come jQuery .Detto questo è solo una questione di fadeIn()
e fadeOut()
.
Dato che sei un principiante nello sviluppo web, devi sapere che jQuery è una libreria molto popolare che quasi tutti usano oggigiorno.Ti consente di scrivere meno codice e di fare di più.
Ma, cosa più importante, garantisce la compatibilità tra browser.
Altri suggerimenti
Dai un'occhiata a questa domanda:
Dissolvenza in un'immagine di sfondo
Ecco un collegamento che spiega come eseguire una transizione in dissolvenza con jQuery:
http://jqueryfordesigners.com/image-loading/
Se hai bisogno della libreria jQuery, puoi incollare questo codice nella tua pagina:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>