Rotate random background images with crossfade transition_问答_开发者

Rotate random background images with crossfade transition

开发者 https://www.devze.com 2023-04-12 19:52 出处：网络

I have 15 background images in my website. They´re all 1024 x 768 px, and they load random each time the user load the page. Besides that, the images fill the entire screen, no matter what size the b

相关专题：javascript

I´m stuck with something I want to accomplish, though: I want the images to randomly rotate every n seconds, using a cross fade transition. I´ve reading like a ton of tutorials regarding that subject, but still can´t figure it out.

Thanks in advance, guys!

This is the code:

<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
<script type="text/javascript">

var FullscreenrOptions = {width: 1024, height: 768, bgID: '#bgimg'};
            jQuery.fn.fullscreen开发者_如何转开发r(FullscreenrOptions);

var randnum = Math.random();
var inum = 15;
var rand1 = Math.round(randnum * (inum-1)) + 1;

images = new Array
images[1] = "images/contactBG01.jpg"
images[2] = "images/contactBG02.jpg"
images[3] = "images/contactBG03.jpg"
images[4] = "images/contactBG04.jpg"
images[5] = "images/contactBG05.jpg"
images[6] = "images/contactBG06.jpg"
images[7] = "images/contactBG07.jpg"
images[8] = "images/contactBG08.jpg"
images[9] = "images/contactBG09.jpg"
images[10] = "images/contactBG10.jpg"
images[11] = "images/contactBG11.jpg"
images[12] = "images/contactBG12.jpg"
images[13] = "images/contactBG13.jpg"
images[14] = "images/contactBG14.jpg"
images[15] = "images/contactBG15.jpg"
onload=function(){
    document.getElementById("bgimg").src=images[rand1];
}   
</script>
    </head>        
    <body>
<img id="bgimg" src="" />     
<div id="realBody"> 
      <img id="exampleDiv"  src="images/contact_top.png"/><br>
      <img id="exampleDivBottom" src="images/contact_pie.gif">          
    </div>
</body>
</html>

if jQuery is an option:

// Wait for DOM-ready, don't use `window.onload`
$(function() {
    // The image we are going to be updating
    var img = $("#bgimg"),
        // The number of seconds between transitions
        every = 15 * 1000,
        // The speed at which to fade, can be: 'slow',
        // 'medium, 'fast', or a number (in milliseconds)
        fadeSpeed = "slow",
        // The images to cycle through
        imgs = [
            "images/contactBG01.jpg",
            "images/contactBG02.jpg",
            "images/contactBG03.jpg",
            "images/contactBG04.jpg",
            "images/contactBG05.jpg",
            "images/contactBG06.jpg",
            "images/contactBG07.jpg",
            "images/contactBG08.jpg",
            "images/contactBG09.jpg",
            "images/contactBG10.jpg",
            "images/contactBG11.jpg",
            "images/contactBG12.jpg",
            "images/contactBG13.jpg",
            "images/contactBG14.jpg",
            "images/contactBG15.jpg"
        ];

    // Use setTimeout to schedule the image to be updated
    // periodically
    setTimeout(function() {
        // Fade the image out, then when done...
        img.fadeOut( fadeSpeed, function() {
            // Use the length of the array to generate a number
            var newSrc = imgs[Math.round(Math.random * (imgs.length-1)) + 1];
            // Replace the src, then fade back in
            img
                .attr("src", newSrc )
                .fadeIn( fadeSpeed )
    }, every );
});

hope that helps! cheers.