js滑鼠點擊圖片切換效果程式碼分享_javascript技巧
- WBOY原創
- 2016-05-16 15:42:291584瀏覽
本文實例講述了js滑鼠點擊圖片切換效果。分享給大家供大家參考。具體如下：
實作原理很簡單，其實是多張圖片疊起來，點擊圖片後依序賦予圖片一個class，使其看起來在表面而已，點擊圖片，可以實現圖片的不斷切換效果。
運作效果圖：
小提示：瀏覽器中如果無法正常運作，可以嘗試切換瀏覽模式。
<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滑鼠點擊圖片切換效果程式碼，希望大家可以喜歡。 陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn