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修改input的type属性问题探讨
Oct 12 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
JavaScript数组操作详解
Feb 04 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
微信小程序实现折线图的示例代码
Jun 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
菜鸟修复电子管记
2021/03/02 无线电
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
Python编程中装饰器的使用示例解析
2016/06/20 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
MySQL面试题目集锦
2016/04/14 面试题
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
商务主管岗位职责
2013/12/08 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
入党介绍人意见范文
2015/06/01 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2016春季运动会前导词
2015/11/25 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis