分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片变换的特效（同时淡入淡出效果）

和上一个发的文章一样，同样是利用setInterval()定时器，可以实现图片淡入淡出，图片变换等等特效。

其实可以看出，图片并不是背景图片，只是利用了DIV中position: absolute;z-index:6px这个属性让这个DIV不是处在第0层的位置，效果就好像是背景图片一样。

图片的淡入淡出，其实是用到了滤镜filter:alpha(opacity=0);这个这个属性。opacity是设置透明度的。滤镜filter下还有一个shadow，用来显示阴影的。

大家以后多用用这几个属性，说不定会有很好的效果。

应该还能实现很多其他的特效，有兴趣的话可以自己做一个，到时候记得发给我。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>bgout.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
    

  </head>
  
  <body leftmargin="0px" topmargin="0px"> 
    <div style="position: absolute;z-index:6px;width: 1366px;text-align: right">
    <img id="cz" alt="" src="bg.jpg" style="width: 1366px;height: 968px;filter:alpha(opacity=0);display: 'none'">
    
    </div>
  </body>
  <script type="text/javascript">
  var img=document.getElementById("cz");
  var allImg=new Array("bg.jpg","bg2.jpg","bg3.jpg");
  var index=0;
  img.style.filter="alpha(opacity=0)";
  var i=0;
  var i_incr=5;
  
  function tmd(){
  if(i<-5){
    i_incr=5;
  }
  if(i>=125){
   i_incr=-5;
  }
 	changeBg();
  }
  
  var timer;
   startBh();
  function startBh(){
   img.style.display='block';
  timer=window.setInterval("tmd()",100)
  }
  function changeBg(){
   i+=i_incr;
   if(i<-5){
   	index++;
 	 if(index>2){
 	 	index=0;
  	}
  	img.src=allImg[index];
   }
  img.style.filter="alpha(opacity="+i+")";
  }
  
  </script>
</html>

原文链接：https://blog.csdn.net/sdd379733766/article/details/7879266