本文實(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)擊圖片切換效果代碼如下

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

*{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;}

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'));

});

總結(jié)

以上是生活随笔為你收集整理的html鼠标点击切换图片,js鼠标点击图片切换效果代码分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。