使用onMouseOver="show_PIC('url(img/1.jpg)')"来调用，功能为：鼠标放到另外一个图标时，照片框（id为“PIC”）中的图片变为另外一张，中间使用setInterval（直到结束条件为止，不断的调用函数）来实现动画效果。
首先是PIC的样式：
.Picture{
float: left;
margin-top: 20px;
margin-left: 189px;
width: 1250px;
height: 780px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url(img/0.png);
}
淡入淡出动画加改变图像：
// JavaScript Document
function fadeIn(nam,speed){
speed/=10;
var element=document.getElementById(nam);
if(element.style.opacity !==1){
var num = 0;
var st = setInterval(function(){
num++;
element.style.opacity = num/10;
if(num>=10) { clearInterval(st); }
},speed);
}
}
function fadeOut(nam,speed){
speed/=10;
var element=document.getElementById(nam);
if(element.style.opacity !==0){
var num = 10;
var st = setInterval(function(){
num--;
element.style.opacity = num / 10 ;
if(num<=0) { clearInterval(st); }
},speed);
}
}
//show_PIC('url(img/1.jpg)')
function show_PIC(p) {
var speed=100;
fadeOut("PIC",speed);
setTimeout(function(){
var box=document.getElementById("PIC");
box.style.backgroundImage=p;
fadeIn("PIC",speed);
},speed);
}
另外加了一个随着窗口大小变化而变化的效果
<body onLoad="reset()" onResize="reset()">
function reset(){
var element=document.getElementById("PIC");
element.style.width=document.documentElement.clientWidth-600;
element.height=max(780,element.style.width*78/125);
}