js鼠标点击图片切换效果代码分享

本文实例讲述了js鼠标点击图片切换效果。分享给大家供大家参考。具体如下：
实现原理很简单，其实是多张图片叠加起来，点击图片后依次赋予图片一个class，使其看起来在表面而已，点击图片，可以实现图片的不断切换效果。
运行效果图： -------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js鼠标点击图片切换效果代码如下

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js鼠标点击图片切换效果</title><style type="text/css">*{margin:0;padding:0;border:none;outline:none;list-style:none;}#wrapper {width:280px;margin:20px auto;}#imageContainer {width:280px;height:280px;position:relative;overflow:hidden;cursor:pointer;}#imageContainer img {position:absolute;top:0;left:0;z-index:1;}#imageContainer img.active {z-index:3;}</style><！--[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" width="280" height="280" /> <img src="images/02.jpg" width="280" height="280" /> <img src="images/03.jpg" width="280" height="280" /> </div></div><script src="js/jquery.min.js"></script><script>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"））;}）;</script></body></html>

以上就是为大家分享的js鼠标点击图片切换效果代码，希望大家可以喜欢。