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鼠标点击图片切换效果代码，希望大家可以喜欢。