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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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 ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
解析js原生方法创建表格效率测试
2013/07/08 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python中函数的用法实例教程
2014/09/08 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
win与linux系统中python requests 安装
2016/12/04 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python实现简单五子棋游戏
2019/06/18 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
采购求职信
2014/03/17 职场文书
优秀家长自荐材料
2014/08/26 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
python for循环赋值问题
2021/06/03 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏