js支持键盘控制的左右切换立体式图片轮播效果代码分享


Posted in Javascript onAugust 26, 2015

本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果。分享给大家供大家参考。具体如下:
这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制。
特性介绍:
     1.轻松的改变幻灯变的宽度。
     2.轻易改变下一张展示图片的数量。
     3.最后一张图片会循环回到第一张图片里。
     4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息。

运行效果图:                                         -------------------查看效果 下载源码-------------------

js支持键盘控制的左右切换立体式图片轮播效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js支持键盘控制的左右切换立体式图片轮播效果代码如下

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>支持键盘控制的左右切换立体式图片轮播效果</title>
<link type="text/css" href="css/fancymoves.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/slider.js"></script>
<link type="text/css" href="css/jiaobenzhijia.css" rel="stylesheet" />
<script src="js/lanrenzhijia.js"></script>
<!--图片查看插件 FancyBox 的javascript -->
<script src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" />
<script>
 $(document).ready(function () {
 $("a.pop1").fancybox();

 $("a.pop2").fancybox({
 'overlayShow': false,
 'transitionIn': 'elastic',
 'transitionOut': 'elastic'
 });

 $("a.pop3").fancybox({
 'transitionIn': 'none',
 'transitionOut': 'none',
 'overlayColor': '#000',
 'overlayOpacity': 0.7
 });

 $("a.pop4").fancybox({
 'opacity': true,
 'overlayShow': false,
 'transitionIn': 'elastic',
 'transitionOut': 'none'
 });

 $("a.pop5").fancybox();

 $("a#example6").fancybox({
 'titlePosition': 'outside',
 'overlayColor': '#000',
 'overlayOpacity': 0.9
 });

 $("a.pop6").fancybox({
 'titlePosition': 'inside'
 });

 $("a.pop7").fancybox({
 'titlePosition': 'over'
 });

 });
 </script>
</head>
<body>
<div id="wrapper">
 <div id="slider-one">
 <div> <img src="images/img1.jpg" />
 <p> one hundred<br />
 <a class="pop1" href="images/1-2.jpg" rel="group1" title="详细图片文字描述1">查看详细图片</a> <a class="pop1" href="images/1-3.jpg" rel="group1" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img2.jpg" />
 <p> math problem<br />
 <a class="pop2" href="images/2-2.jpg" rel="group2" title="详细图片文字描述1">查看详细图片</a> <a class="pop2" href="images/2-3.jpg" rel="group2" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img3.jpg" />
 <p> better than i deserve<br />
 <a class="pop3" href="images/3-2.jpg" rel="group3" title="详细图片文字描述1">查看详细图片</a> <a class="pop3" href="images/3-3.jpg" rel="group3" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img4.jpg" />
 <p> seven days a week<br />
 <a class="pop4" href="images/4-2.jpg" rel="group4" title="详细图片文字描述1">查看详细图片</a> <a class="pop4" href="images/4-3.jpg" rel="group4" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img5.jpg" />
 <p> path to nowhere<br />
 <a class="pop5" href="images/5-2.jpg" rel="group5" title="详细图片文字描述1">查看详细图片</a> <a class="pop5" href="images/5-3.jpg" rel="group5" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img6.jpg" />
 <p> and then i woke up<br />
 <a class="pop6" href="images/6-2.jpg" rel="group6" title="详细图片文字描述1">查看详细图片</a> <a class="pop6" href="images/6-3.jpg" rel="group6" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img7.jpg" />
 <p> it's about time<br />
 <a class="pop7" href="images/7-2.jpg" rel="group7" title="详细图片文字描述1">查看详细图片</a> <a class="pop7" href="images/7-3.jpg" rel="group7" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img8.jpg" />
 <p> two are better than one<br />
 <a class="pop2" href="images/8-2.jpg" rel="group8" title="详细图片文字描述1">查看详细图片</a> <a class="pop2" href="images/8-3.jpg" rel="group8" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img9.jpg" />
 <p> lowercase<br />
 <a class="pop2" href="images/9-2.jpg" rel="group9" title="详细图片文字描述1">查看详细图片</a> <a class="pop2" href="images/9-3.jpg" rel="group9" title="详细图片文字描述2"></a> </p>
 </div>
 </div>
</div>
</body>
</html>

以上就是为大家分享的js鼠标点击图片切换效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
cnpm加速Angular项目创建的方法
Sep 07 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
vue接口请求加密实例
Aug 11 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 #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
You might like
PHP 远程关机实现代码
2009/11/10 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python进行数据提取的方法总结
2016/08/22 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Django 请求Request的具体使用方法
2019/11/11 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
python实现简单井字棋游戏
2020/03/04 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
赞助商致辞
2015/07/30 职场文书