本文實例講述了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鼠標點擊圖片切換效果代碼，希望大家可以喜歡。
新聞熱點
疑難解答
