jQuery实现点击替换图片特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现点击替换图片特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery实现点击替换图片</title>
<link rel="stylesheet" href="css/core.css" media="all" type="text/css">
<link rel="image_src" href="">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<div id="wrapper">
	
	<div id="imageContainer">
		<img src="images/01.jpg" class="active" alt="01" width="280" height="280" />
		<img src="images/02.jpg" alt="02" width="280" height="280" />
		<img src="images/03.jpg" alt="03" width="280" height="280" />
	</div>
	
</div>

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/core.js"></script>
</body>
</html>

JS代码(core.js):

var imageObject ={
	clickSwap:function(obj){
	obj.click(function(){
	var activeImage = $(this).children('img.active');
	activeImage.removeClass('active');
	if (activeImage.next().length > 0){
	activeImage.next().addClass('active');
}
else{
	$(this).children('img:first-child').addClass('active');
}
return false;
}
);
}
}
;
	$(function(){
	imageObject.clickSwap($('#imageContainer'));
}
);

CSS代码(core.css):

*{margin:0;padding:0;border:none;outline:none;}
body{text-align:center;font-family:Arial,Verdana,Sans-serif;font-size:12px;padding:30px 0;}
body,a{color:#333;}
#wrapper{width:280px;margin:0 auto;}
#imageContainer{width:280px;height:280px;position:relative;overflow:hidden;background:#eee;}
#imageContainer img{position:absolute;top:0;left:0;z-index:1;}
#imageContainer img.active{z-index:3;}

附件:下载该文件资源,减少时间成本(增值服务)