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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
js调试系列 初识控制台
Jun 18 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
node使用promise替代回调函数
May 07 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
ES6中Promise的使用方法实例总结
Feb 18 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
消息持续发送的完整例子
2006/10/09 PHP
php两种无限分类方法实例
2015/04/21 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python实现类继承实例
2014/07/04 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python pandas模块基础学习详解
2019/07/03 Python
Pyqt5自适应布局实例
2019/12/13 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
公司法人授权委托书范本
2014/09/12 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书