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 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
JS+DIV实现拖动效果
Feb 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
Terran热键控制
2020/03/14 星际争霸
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
玩转方法:call和apply
2014/05/08 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
求职教师自荐书
2014/06/19 职场文书
司机个人年终总结
2015/03/03 职场文书
2015年暑假工作总结
2015/07/13 职场文书
《鲸》教学反思
2016/02/23 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
Java实现房屋出租系统详解
2021/10/05 Java/Android
Python中如何处理常见报错
2022/01/18 Python