一个多星期没有学Jquery了，今晚坚持把像flash一样的图片切换，终于实现了，效果出来了，不过功能还不是很完善，缺少1，2，3，4这样的选择事件
这是完整的html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FourDay</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
for(var i =2 ; i < 6 ;i++)
{
$("#img_"+i).hide();
}
$("div").click(function(){
$(this).hide();
var id = $(this).attr("id");
var number = parseInt(id.substring(id.length-1,id.length));
if(number == 5) number = 0;
number = number + 1;
var newID = "#img_"+number;
$(newID).show();
}
);
/*
图片自动切换事件
*/
var ImgID = 0;
function ChangePic(){
if(ImgID < 5){
$("#img_"+ImgID).hide(1000);
ImgID = ImgID+1;
var NewID = "#img_"+ImgID;
$(NewID).show(1500);
}
else{
$("#img_"+ImgID).hide(1000);
ImgID = 0;
ImgID = ImgID+1;
NewID = "#img_"+ImgID;
$(NewID).show(1500);
}
window.setTimeout(ChangePic,2000);
}
ChangePic();
});
</script>
<style type="text/css">
body{padding:0;margin:0px;}
.showImg{float:left;margin-top:200px;}
.hideImg{display:none;}
</style>
</head>
<body>
<div id="img_1" style="width:500px;height:400px;float:left; background:url('http://news.zaqc.com/anli/UploadFiles_7714/200805/2008052316145893.jpg');"></div>
<div id="img_2" style="width:500px;height:400px;float:left;background:url('http://photocdn.sohu.com/20110723/Img314313940.jpg') no-repeat ;"></div>
<div id="img_3" style="width:500px;height:400px;float:left;background:url('http://photocdn.sohu.com/20110723/Img314288712.jpg');"></div>
<div id="img_4" style="width:500px;height:400px;float:left;background:url('http://photocdn.sohu.com/20110723/Img314288717.jpg');"></div>
<div id="img_5" style="width:500px;height:400px;float:left;background:url('http://i0.sinaimg.cn/qc/photo_auto/photo/buycar/1030/1305783914.jpg');"></div>
</body>
</html>
明天还要上班，收笔了…
editor：翱翔之心
URL：http://www.cnblogs.com/aoxiangzhixin/archive/2011/08/09/2131646.html
Date:2011-08-09 01:26
;"){kind=link}
){kind=link}
;"){kind=link}
;"){kind=link}
;"){kind=link}