jQuery实现点击小图片淡入淡出显示大图片特效


Posted in Javascript onSeptember 09, 2015

分享一款基于jQuery点击淡入淡出显示图片特效。这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码。效果图如下:

jQuery实现点击小图片淡入淡出显示大图片特效

在线预览    源码下载

html代码:

<center><p style="color:#334960">点击图标进行展示</p></center>
 <div class="main">
  <div id="coolShow"></div>
  <div id="handBar"></div>
 </div>
 <script type="text/javascript">
  /*定义需要展示的图片以及图片的展示时间*/
  $(document).ready(function () {
   $('#coolShow').coolShow({
    imgSrc: ['images/1.png', 'images/2.png', 'images/3.png'],
    speed: 40
   });
  });
 </script>
Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
浅谈javascript的分号的使用
May 12 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 #Javascript
使用impress.js制作幻灯片
Sep 09 #Javascript
谈谈impress.js初步理解
Sep 09 #Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 #Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 #Javascript
JavaScript中实现Map的示例代码
Sep 09 #Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 #Javascript
You might like
法压式咖啡之制作法
2021/03/03 冲泡冲煮
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
初学Python函数的笔记整理
2015/04/07 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
药品营销策划方案
2014/06/15 职场文书
北京申奥口号
2014/06/19 职场文书
教育合作协议范本
2014/10/17 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2016元旦晚会主持词
2015/07/01 职场文书