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


Posted in Javascript onAugust 26, 2015

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

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

运行效果图:                                    

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

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

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
详解iframe与frame的区别
Jan 13 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
JS 事件机制完整示例分析
Jan 15 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 #Javascript
javascript中的五种基本数据类型
Aug 26 #Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 #Javascript
简介alert()与console.log()的不同
Aug 26 #Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 #Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 #Javascript
jquery实现的横向二级导航效果代码
Aug 26 #Javascript
You might like
聊天室php&amp;mysql(四)
2006/10/09 PHP
php生成xml简单实例代码
2009/12/16 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
详解javascript函数的参数
2015/11/10 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python注释详解
2016/06/01 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
浅析python参数的知识点
2018/12/10 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
django ORM之values和annotate使用详解
2020/05/19 Python
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
经典大学生求职信范文
2014/01/06 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
2016继续教育研修日志
2015/11/13 职场文书
小学中队长竞选稿
2015/11/20 职场文书