jquery插件orbit.js实现图片折叠轮换特效


Posted in Javascript onApril 14, 2015

jQuery图片折叠轮换代码,可以点击左右箭头按钮切换图片,漂亮简洁。兼容主流浏览器,phplearn初学者推荐下载!

使用方法:
1、head区域引用文件 jquery.min.js,chuxz.css
2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码
3、在页面底部引用jq.orbit.js.js, orbit.js
4、复制images文件夹里的图片到相应的路径

<div class="orbit-wrapper">       
  <div id="featured" class="orbit">  
    <a href="http://www.phplearn.cn/"><img src="images/1.jpg" width="185" alt="《Just Married》" title="《Just Married》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/2.jpg" width="185" alt="《佩加索斯》" title="《佩加索斯》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/3.jpg" width="185" alt="《太庙的一场偶遇》" title="《太庙的一场偶遇》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/4.jpg" width="185" alt="《为爱痴狂》" title="《为爱痴狂》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/5.jpg" width="185" alt="《游走,在北京的每一条街》" title="《游走,在北京的每一条街》"></a>  
  </div>  
</div>  
<script type="text/javascript" src="js/jq.orbit.js"></script>  
<script type="text/javascript" src="js/orbit.js"></script>

演示图:

jquery插件orbit.js实现图片折叠轮换特效  

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
mocha的时序规则讲解
Feb 16 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 #Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 #Javascript
JavaScript将字符串转换为整数的方法
Apr 14 #Javascript
使用javascript实现判断当前浏览器
Apr 14 #Javascript
jQuery获得指定元素坐标的方法
Apr 14 #Javascript
JavaScript时间转换处理函数
Apr 14 #Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 #Javascript
You might like
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
python模块之paramiko实例代码
2018/01/31 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
在pycharm中实现删除bookmark
2020/02/14 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
应届毕业生如何写求职信
2014/02/16 职场文书
合作经营协议书范本
2014/04/17 职场文书
增员口号大全
2014/06/18 职场文书
公司委托书格式
2014/08/01 职场文书
中秋节活动总结
2014/08/29 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
财务整改报告范文
2014/11/05 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书