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 相关文章推荐
Javascript 布尔型分析
Dec 22 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
js实现全选和全不选
Jul 28 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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之密码加密的几种方式
2015/07/29 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
JavaScript数组方法总结分析
2016/05/06 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
详解python分布式进程
2018/10/08 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
浅谈python3中input输入的使用
2019/08/02 Python
汉语言文学毕业生求职信
2013/10/01 职场文书
建筑毕业生自我鉴定
2013/10/18 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
后进生评语大全
2015/01/04 职场文书
员工辞职信怎么写
2015/02/27 职场文书
大学感恩节活动总结
2015/05/05 职场文书
报案材料怎么写
2015/05/25 职场文书
致运动员的广播稿
2015/08/19 职场文书