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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
js实现简单的倒计时
Jan 28 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 JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python字符串过滤性能比较5种方法
2017/06/22 Python
Flask数据库迁移简单介绍
2017/10/24 Python
对pandas处理json数据的方法详解
2019/02/08 Python
深入浅析Python中的迭代器
2019/06/04 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
继电保护工岗位职责
2014/01/05 职场文书
初中科学教学反思
2014/01/21 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
技校毕业生自荐信
2014/06/03 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
回复函格式及范文
2015/07/14 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
应届毕业生的自我评价
2019/06/21 职场文书