js鼠標點擊圖片切換效果代碼分享
更新時間：2021年10月12日 15:30:53 投稿：lijiao
這篇文章主要為大家詳細介紹了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]>
<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鼠標點擊圖片切換效果代碼，希望大家可以喜歡。
相關文章
這篇文章主要介紹了JavaScript對象屬性操作實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了axios請求參數的三種方式,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了如何利用JavaScript實現檢測用戶是否在線功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2022-12-12
這篇文章主要為大家詳細介紹了JavaScript實現HTML導航欄下拉菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
跨標簽頁通信是指在瀏覽器中的不同標簽頁之間進行數據傳遞和通信的過程,這篇文章為大家整理了前端常見的跨標簽頁通信方式,有需要的小伙伴可以了解下2023-10-10
這篇文章主要為大家詳細介紹了用js實現簡單的tab選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了微信小程序實現下拉框功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
最近掌門人在寫3D游戲,對于其中的物理效果很感興趣,今天我將使用純JavaScript來實現一個簡易的物理模擬,其中包括碰撞檢測與響應、摩擦力與空氣阻力、以及物體的破壞效果,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JavaScript接口實現方法,結合實例形式詳細分析了JavaScript接口實現原理、操作步驟與相關注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了javascript創(chuàng)建對象的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08