Changing Background Images using jQuery
| <html> | |
| <head> | |
| <style type="text/css"> | |
| .bgimage { | |
| position: fixed; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| background-color: black; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #bgimage1 { | |
| /* Initiales Bild */ | |
| background-image: url(bg.1.jpg); | |
| } | |
| #bgimage2 { | |
| display: none; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function fadeImages() { | |
| var bgImages = ["bg.1.jpg", "bg.2.jpg", "bg.3.jpg", "bg.4.jpg"]; | |
| var layer1 = $("#bgimage1"); | |
| var layer2 = $("#bgimage2"); | |
| var counter = 0; | |
| var fadeDuration = 2000; | |
| var keepImageDuration = 5000; | |
| function crossFade() { | |
| if (counter % 2 === 0) { | |
| layer2.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")"); | |
| layer2.fadeIn(fadeDuration, function () { | |
| setTimeout(crossFade, keepImageDuration); | |
| }); | |
| } else { | |
| layer1.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")"); | |
| layer2.fadeOut(fadeDuration, function () { | |
| setTimeout(crossFade, keepImageDuration); | |
| }); | |
| } | |
| counter++; | |
| }; | |
| setTimeout(crossFade, keepImageDuration); | |
| } | |
| $().ready(function () { | |
| fadeImages(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="bgimage" id="bgimage1"> | |
| </div> | |
| <div class="bgimage" id="bgimage2"> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment