js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享

更新時(shí)間：2021年10月12日 15:30:53 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了js鼠標(biāo)點(diǎn)擊圖片切換效果，很實(shí)用的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了js鼠標(biāo)點(diǎn)擊圖片切換效果。分享給大家供大家參考。具體如下：

實(shí)現(xiàn)原理很簡(jiǎn)單，其實(shí)是多張圖片疊加起來(lái)，點(diǎn)擊圖片后依次賦予圖片一個(gè)class，使其看起來(lái)在表面而已，點(diǎn)擊圖片，可以實(shí)現(xiàn)圖片的不斷切換效果。

運(yùn)行效果圖：

-------------------查看效果-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的js鼠標(biāo)點(diǎn)擊圖片切換效果代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js鼠標(biāo)點(diǎn)擊圖片切換效果</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鼠標(biāo)點(diǎn)擊圖片切換效果代碼，希望大家可以喜歡。

您可能感興趣的文章:

相關(guān)文章

JavaScript對(duì)象屬性操作實(shí)例解析
這篇文章主要介紹了JavaScript對(duì)象屬性操作實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
axios請(qǐng)求參數(shù)的三種方式示例詳解
這篇文章主要介紹了axios請(qǐng)求參數(shù)的三種方式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2022-12-12
JavaScript實(shí)現(xiàn)HTML導(dǎo)航欄下拉菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)HTML導(dǎo)航欄下拉菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
JavaScript常見(jiàn)的跨標(biāo)簽頁(yè)通信方式總結(jié)
跨標(biāo)簽頁(yè)通信是指在瀏覽器中的不同標(biāo)簽頁(yè)之間進(jìn)行數(shù)據(jù)傳遞和通信的過(guò)程,這篇文章為大家整理了前端常見(jiàn)的跨標(biāo)簽頁(yè)通信方式,有需要的小伙伴可以了解下
2023-10-10
用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
微信小程序?qū)崿F(xiàn)下拉框功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉框功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
使用JavaScript實(shí)現(xiàn)一個(gè)物理模擬
最近掌門人在寫3D游戲,對(duì)于其中的物理效果很感興趣,今天我將使用純JavaScript來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)易的物理模擬,其中包括碰撞檢測(cè)與響應(yīng)、摩擦力與空氣阻力、以及物體的破壞效果,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-01-01
JavaScript接口實(shí)現(xiàn)方法實(shí)例分析
這篇文章主要介紹了JavaScript接口實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript接口實(shí)現(xiàn)原理、操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2020-05-05
javascript如何創(chuàng)建對(duì)象
這篇文章主要為大家詳細(xì)介紹了javascript創(chuàng)建對(duì)象的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08