js mouse click image switching effect code sharing_javascript skills-JS Tutorial-php.cn

js mouse click image switching effect code sharing_javascript skills

WBOY

Release： 2016-05-16 15:42:29

Original

1607 people have browsed it

The example in this article describes the js mouse click image switching effect. Share it with everyone for your reference. The details are as follows:
The implementation principle is very simple. In fact, multiple pictures are superimposed. After clicking on the picture, each picture is given a class in order to make it look like it is on the surface. Clicking on the picture can achieve the effect of continuous switching of pictures.
Running renderings: ----------------------------------------------------------------------------------------------------------------

Tips: If the browser does not work properly, you can try switching the browsing mode.

The js mouse click image switching effect code shared with you is as follows

<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>

Copy after login

The above is the js mouse click image switching effect code shared with you. I hope you can like it.