<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js/jquery网页背景图过渡变换效果</title>
<meta name="keywords" content="网页背景图过渡变换效果,背景图片切换" />
<meta name="description" content="js/jquery网页背景图过渡变换效果,网页背景图片切换" />
<link rel="stylesheet" type="text/css" href="
http://www.lantou.net/web/jquery/style.css" />
<!--[if lt IE 9]>
<script src="
http://www.lantou.net/web/jquery/html5.js" type="text/javascript"></script>
<![endif]-->
<script type='text/javascript' src='http://www.lantou.net/web/jquery/comment-reply.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.lantou.net/web/jquery/jquery.js?ver=1.7.2'></script>
<style>
html, body{height: 100%;margin: 0px 0px 0px 0px;}
html{overflow: hidden;}
</style>
<style>
img.bg-rand { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position:absolute; top: 0; left: 0; z-index:-10; }
@media screen and (max-width: 1024px) { img.bg-rand { left: 50%; margin-left: -512px; } } body { background-color: #000000; }
</style>
<script type="text/javascript">
var flg=0;
function SImage(callback)
{var img = new Image();this.img = img;
var appname = navigator.appName.toLowerCase();if (appname.indexOf("netscape") == -1)
{img.onreadystatechange = function () {if (img.readyState == "complete"){callback(img);}};
} else {img.onload = function () {if (img.complete == true){callback(img);}}}}
SImage.prototype.get = function (url){this.img.src = url;}
var img1 = new SImage(icall);
img1.get("
http://www.lantou.net/web/jquery/01.jpg");
var img2 = new SImage(icall);
img2.get("
http://www.lantou.net/web/jquery/02.jpg");
var img3 = new SImage(icall);
img3.get("
http://www.lantou.net/web/jquery/03.jpg");
var img4 = new SImage(icall);
img4.get("
http://www.lantou.net/web/jquery/04.jpg");
function icall(obj)
{flg=flg+1;if(flg==4){document.getElementById("page_view").style.display="";}}
</script>
</head>
<body>
<div id="page_view">
<img id="bg-rand" class="bg-rand" src="
http://www.lantou.net/web/jquery/04.jpg" alt="" />
<img id="bg-preloader" style="display:none;" src="
http://www.lantou.net/web/jquery/04.jpg" alt=""/>
</div>
<script type="text/javascript">
document.getElementById("page_view").style.display="none";
var bbg_imgObject = jQuery("#bg-rand");
var bbg_imgPreload = jQuery("#bg-preloader");bbg_imgObject.hide();
bbg_imgPreload.load(
function(){bbg_imgPreload.unbind();bbg_imgObject.fadeIn(600, "linear" ,startSlideshow);}
).each(function(){
if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6 || jQuery.browser.opera)
{jQuery(this).trigger("load");}
});
var bbg_timer;
var bbg_image_base_path = "
http://www.lantou.net/web/jquery";
var bbg_image_array_pointer = 4;var bbg_images = new Array(4);
bbg_images[0] = "01.jpg";
bbg_images[1] = "02.jpg";
bbg_images[2] = "03.jpg";
bbg_images[3] = "04.jpg";
function startSlideshow(){
bbg_timer = setTimeout("bbg_changeBackground()", 6000);
bbg_imgPreload.attr('src',bbg_image_base_path+'/'+bbg_images[bbg_image_array_pointer]);
}
function bbg_changeBackground(){
clearTimeout(bbg_timer);
bbg_imgObject.fadeOut(600,'linear', function(){
bbg_imgObject.attr('src',bbg_image_base_path+'/'+bbg_images[bbg_image_array_pointer])
.fadeIn(600,'linear', startSlideshow);
});
bbg_image_array_pointer ++;
if(bbg_image_array_pointer >= bbg_images.length)
bbg_image_array_pointer = 0;
}
</script>
下载地址：
http://www.lantou.net/web/jquery/jquery_img.rar请自行复制地址下载。
</body>
</html>
