<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>新维度工作室</title>
<style type="text/css">
*{ padding:0; margin:0;}
.images_blocks{ display:block; width:400px; height:241px; margin:0 auto; border:1px solid red;}
</style>
<script src="js/jquery-1.10.1.js"></script>
<script language="javascript">
var path="images/";
var e=".jpg";
var currentIndex=1;
var maxIndex=7;
function init(){
$(".images_blocks").attr("src",path+currentIndex+e);
}
function change_image_src(){
if(currentIndex<maxIndex-1){
currentIndex++;
}else{
currentIndex=1;
}
$(".images_blocks").attr("src",path+currentIndex+e);
}
function animate(){
//$(".images_blocks").animate({width:'0'},'slow',function(){ change_image_src()}).animate({width:'400px'},'slow');
$(".images_blocks").animate({opacity:'0'},'fast',function(){ change_image_src()}).animate({opacity:'1'},'slow');
}
$(function(){
init();
setInterval("animate()",2000);
$(".images_blocks").click(function(){ animate();});
});
</script>
</head>
<body>
<img class="images_blocks"/>
</body>
</html>
