Home >Web Front-end >JS Tutorial >js mouse click image switching effect code sharing_javascript skills

js mouse click image switching effect code sharing_javascript skills

WBOYOriginal: 2016-05-16 15:42:291583browse

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implements automatic text output (typing special effects)_javascript skillsNext article：JavaScript implements automatic text output (typing special effects)_javascript skills

See more

js mouse click image switching effect code sharing_javascript skills

Related articles