<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color:lavender;
}
.box{
position: absolute;
width: 800px;
height: 600px;margin: 0 auto;
overflow: hidden;
margin-left: 400px;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/jquery-3.0.0.js"></script>
<script>
var savesrc=["road.jpg","tree.jpg"];
var boxsrc="";
var bigimg;
var count=1;
$(function(){
boxsrc="./img/tree.jpg";
CreateImg();
function CreateImg(){
bigimg=$("<img>");
bigimg.addClass("big");
bigimg.attr("src","./img/"+savesrc[0]+"");
$(".box").append(bigimg);
}
FadeIn_FadeOut();
function FadeIn_FadeOut(){
bigimg.animate({
"opacity":"0"
},3000,function(){
$(this).css("opacity","1");
$(this).attr("src",boxsrc);
});
}
});
</script>
</body>
</html>