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中layer关闭指定弹出窗口方法的相关资料,layer是layui的一个弹出层组件,但是可以作为独立组件使用,需要的朋友可以参考下2023-10-10
本文主要介绍了javascript实现温度计时间样式，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了JavaScript数据结构与算法之栈详解,本文讲解了对栈的操作、对栈的实现实例等内容,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript更改原始对象valueOf的方法,涉及javascript使用自定义valueOf函数替换掉原始object中valueOf的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
request请求获取参数的实现方法(post和get两种方式)
下面小编就为大家带来一篇request请求获取参数的实现方法(post和get两种方式)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了JavaScript中this的用法,结合实例形式分析了this的功能、常见用法与相关注意事项,需要的朋友可以参考下2016-12-12
本文给大家介绍了42种浏览器兼容性问题大汇总的相关知识，本文介绍的非常详细，感兴趣的朋友一起学习吧2015-12-12
JavaScript实现Tab标签页切换的最简便方式(4种)
这篇文章主要介绍了JavaScript实现Tab标签页切换的最简便方式(4种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
下面小编就为大家带来一篇js 自带的 map() 方法全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
innerHTML 和 getElementsByName 在IE下面的bug 的解决
innerHTML 真的一个麻烦的东西。IE 和 firefox 对dom 处理的方式不是很一样。IE 对动态加载的很多dom 不支持动态更新。2010-04-04
最新评论