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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python先序遍历二叉树问题
2017/11/10 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python绘制简单折线图代码示例
2017/12/19 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
小学防溺水制度
2014/01/29 职场文书
新教师工作感言
2014/02/16 职场文书
初三开学计划书
2014/04/27 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
房产协议书范本2014
2014/09/30 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
中层干部考核评语
2015/01/04 职场文书
关于迟到的检讨书
2015/05/06 职场文书