您的位置：首页 > Web前端 > JQuery

jquery 图片轮换 潇湘博客

2008-09-05 13:31 232 查看
--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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航