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]>
jquery翻书效果
<script src="lecode/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');
if (().length > 0) {
<().addClass('active');
} else {
$(this).children('img:first-child').addClass('active');
}
return false;
});
}
};
$(function() {
imageObject.clickSwap($('#imageContainer'));
});
</script>
</body>
</html>
以上就是为⼤家分享的js⿏标点击图⽚切换效果代码，希望⼤家可以喜欢。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。