html鼠标点击切换图片,js鼠标点击图片切换效果代码分享

本文实例讲述了js鼠标点击图片切换效果。分享给大家供大家参考。具体如下：

实现原理很简单，其实是多张图片叠加起来，点击图片后依次赋予图片一个class，使其看起来在表面而已，点击图片，可以实现图片的不断切换效果。

运行效果图：

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

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

为大家分享的js鼠标点击图片切换效果代码如下

js鼠标点击图片切换效果

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

});

html鼠标点击切换图片,js鼠标点击图片切换效果代码分享相关推荐

html文本框中加入跑马灯,js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如 ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络先给大家一 ...
c语言鼠标事件的详解,JS鼠标事件（非常详细）
在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型事件类型说明 click 单击鼠标左键时发生,如果右键也按下则不会发生.当用 ...
html轮播带缩略图,js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...
html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随 ...
html图片轮播代码渐隐,js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示: ...
html图片翻页效果代码,js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆 ...
水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...

html鼠标点击切换图片,js鼠标点击图片切换效果代码分享

html鼠标点击切换图片,js鼠标点击图片切换效果代码分享相关推荐

最新文章

热门文章