jquery 图片轮换 潇湘博客
--jquery 图片轮换 潇湘博客
用JQ写最简单的图片轮换功能
<!--http://blog.csdn.net/fkedwgwy---->
<!--潇湘博客---->
<!------>
<!------>
<!------>
<html>
<head>
<script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("td img").one("click",function(){
var index = $(this).attr("id");
$("#idCodeDiv").fadeOut(500,function(){
$("#idCodeDiv").attr({src:index+".jpg"});
$("#idCodeDiv").fadeIn(500);
});
});
});
</script>
<style rel="stylesheet" type="text/css">
#idDIV{width:10%;padding:8px;background-color:#FFD700;font-family:verdana,tahoma;font-size:1em ;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
</head>
<body>
<div id="idDIV"><img id="idCodeDiv"></img></div>
<div><table>
<tr><td><img id="img1" src="img1.jpg"></img></td><td><img id="img2" src="img2.jpg"></img></td></tr>
<tr><td><img id="img3" src="img3.jpg"></img></td><td><img id="img4" src="img4.jpg"></img></td></tr>
</table></div>
</body>
</html>
