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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
thinkphp特殊标签用法概述
2014/11/24 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中的元类编程入门指引
2015/04/15 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python中的列表与元组的使用
2019/08/08 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
如何让python的运行速度得到提升
2020/07/08 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
组织关系转移介绍信
2014/01/16 职场文书
会计专业自荐书
2014/07/08 职场文书
给老婆的道歉信
2015/01/20 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
MySQL 条件查询的常用操作
2022/04/28 MySQL