Rotate random background images with crossfade transition
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 browser window is.
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.
加载中,请稍侯......
精彩评论