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 03 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 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+mysql写的留言本
2006/10/09 PHP
php Try Catch异常测试
2009/03/01 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
浅析JavaScript中的delete运算符
2013/11/30 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python 实现12306登录功能实例代码
2018/02/09 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
微笑服务演讲稿
2014/05/13 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
电工生产实习心得体会
2016/01/22 职场文书