自适应轮播网页全屏背景，根据窗口大小保持背景图片比例。

nabi123 2014-06-03 03:26:19

之前用拉伸背景，在使用标准电脑壁纸作为网页背景时遇到的情况是不同游览器内的可视面积不同，窗口内会使壁纸压缩变形。并且使用浏览器时也经常会改变窗口大小。

演示地址是在dzzoffice中实际使用的背景效果。图片轮播速度为10分钟。
下载的代码中，轮播图片的速度设置的是10秒钟。

演示地址：http://dev.dzzoffice.com

下载地址：http://download.csdn.net/download/nabi123/7440385

如果您也在使用dzzoffice，可以直接把这个代码作为动态壁纸添加进去使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

	<style type="text/css">

	html,body{overflow:hidden; height:100%; width:100%;margin:0; padding:0;}

	#back1,#back0{transition: all 0.5s ease-in 0.2s;}

	</style>

</head>

<body>

<div id="back0" style="position:absolute;width:100%;height:100%;margin:0;padding:0; opacity:1;"><img id="img0" style="height:100%;width:100%" src="./images/b.gif" /></div>

<div id="back1" style="position:absolute;width:100%;height:100%;margin:0;padding:0; opacity:0;"><img id="img1" style="height:100%;width:100%" src="images/b.gif" /></div>

<script>

//根据需要设置

var delay=10*1000;//轮播时间间隔单位毫秒

var max=9;//共有多少张图片，图片编号必须从1开始如1.jpg,2.jpg...

var i=0;

var current=0;

var images=arr_random(max);

var clientWidth=document.documentElement.clientWidth;

var clientHeight=document.documentElement.clientHeight;

var width=height=0;

window.onload=function(){

	width=document.getElementById('img0').width;

	height=document.getElementById('img0').height;

}



var src='./images/'+(images[i]+1)+'.jpg';

var loading0 = new Image();

loading0.src=src;

document.getElementById('img'+current).src=src;

setTimeout(function () {loadCheck(loading0); }, 50);



window.setInterval(function(){

	i++;

	if(i>max) i=1;

	src='./images/'+(images[i]+1)+'.jpg';

	var loading = new Image();

	loading.src=src;

	setTimeout(function () {loadCheck(loading); }, 50);

},delay);

function setImage(){

	var r0=clientWidth/clientHeight;

	var r1=width/height;

	if(r0>r1){//width充满

		w=clientWidth;

		h=w*(height/width);

	}else{

		h=clientHeight;

		w=h*(width/height);

	}

	if(current>0) var current1=0;

	else var current1=1;

	document.getElementById('img'+current1).src=src;

	document.getElementById('img'+current1).style.width=w+'px';

	document.getElementById('img'+current1).style.height=h+'px';

	document.getElementById('back'+current).style.opacity=0;

	document.getElementById('back'+current).style.zIndex=0;

	document.getElementById('back'+current1).style.opacity=1;

	document.getElementById('back'+current1).style.zIndex=1;

	current=current1;

}

function loadCheck(loadding) {

	if(loadding.complete) {

		width = loadding.width;

		height = loadding.height;

		setImage();

	}

};



window.onresize=function(){

	clientWidth=document.documentElement.clientWidth;

	clientHeight=document.documentElement.clientHeight;

	setImage();

}

function arr_random(num) {  

        var arr=[];  

        for (var i = 0; i < num; i++) {  

            arr[i] = i;  

        }  

        for (var i = 0; i < num; i++) {  

            var iRand = parseInt(num * Math.random());  

            var temp = arr[i];  

            arr[i] = arr[iRand];  

            arr[iRand] = temp;  

        }  

        return arr;  

    }  

</script>

</body>

</html>