Question

我的网站上有15张背景图片。它们都是1024 x 768像素，每次用户加载页面时它们都会随机加载。除此之外，无论浏览器窗口的大小如何，图像都会填满整个屏幕。

但是，我仍然坚持要完成的事情：我希望图像每隔n秒随机旋转一次，使用交叉淡入淡出过渡。我读过很多关于这个主题的教程，但仍然无法弄明白。

先谢谢你，伙计们！

这是代码：

<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.fullscreenr(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>

Answer 1

如果jQuery是一个选项：

// 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 );
});

希望有所帮助！欢呼声。

使用交叉渐变过渡旋转随机背景图像

1 个答案: