这篇文章主要为大家详细介绍了射流研究…鼠标点击图片切换效果，很实用的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

运行效果图：

-查看效果-

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

为大家分享的射流研究…鼠标点击图片切换效果代码如下

头

meta http-equiv= Content-Type Content= text/html；charset=utf-8 /

titlejs鼠标点击图片切换效果/标题

style type=text/css

* {边距：0;填充：0;边框：无；大纲：无；列表样式：无；}

# wrapper { width:280 px；边距：20px自动；}

#图像容器{宽度：280像素；高度：280像素位置：相对；溢出：隐藏；光标：指针；}

#图像容器img { position:absolute；top:0；左：0;z指数：1;}

#图像容器img。活动{ z索引：3；}

/风格

！-[如果它是9]

脚本src= http://html 5 shiv。谷歌代码。com/SVN/trunk/html 5。js /脚本

！[endif] -

/头

身体

div id=wrapper

div id=imageContainer

img src= images/01。jpg class= active width= 280 height= 280 /

img src= images/02。jpg 宽度= 280 高度= 280 /

img src= images/03。jpg 宽度= 280 高度= 280 /

/div

/div

脚本src=js/jquery.min.js/script

脚本

var imageObject={

单击wap:函数(对象){

obj.click(function() {

var activeImage=$(this).儿童(img。活动’)；

活动图像。移除类(“active”)；

if (activeImage.next().长度0) {

activeImage.next().添加类(“活动”)；

}否则{

$(这个)。孩子( img:第一个孩子)。添加类(“活动”)；

}

返回错误的

});

}

};

$(function() {

图像对象。单击WAP($( # image container ))；

});

/脚本

/body

/html

以上就是为大家分享的射流研究…鼠标点击图片切换效果代码，希望大家可以喜欢。