<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>a</title>

<style>

*{

list-style: none;

}

img{

width:500px;

height:300px;

opacity:1;

}

</style>

<script src="js/jquery-1.11.3.js"></script>

</head>

<body>

<div>

<img id="img" src="img/1.jpg" />

</div>

</body>

<script>

var i=1;

var img=document.getElementById("img");  

var timer1=null;

var timer2=null;

function autoPlay(){

timer1=setInterval(function(){

i++;

if(i>4){

i=1;

}

show(i);

},2000)

}

autoPlay();

img.onmousemove=function(){

clearInterval(timer1);

}

img.onmouseout=function(){

autoPlay();

}

/*透明度*/

function show (i) { 

   var alpha = 0; 

   img.src="img/"+i+".jpg";

   clearInterval(timer1);

   //其它浏览器的透明度

   img.style.opacity = 0.2; 

   //IE的透明度

   img.style.filter = "alpha(opacity=0.2)";    

timer2 = setInterval(function () { 

alpha += 2;   

alpha > 100 && (alpha =100);

img.style.opacity = alpha / 100; 

img.style.filter = "alpha(opacity = " + alpha + ")"; 

if(alpha == 100){

clearInterval(timer2); 

alpha = 0;

}  

},20); 

autoPlay();

};

</script>

<html>