大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slider基础上改动的,由于有点像flash图片展示的效果,所以就叫flashSlider吧

先看看效果:

flashSlider的功能

   1.支持纵向滑动和横向滑动

2.支持自动滚动和连续滑动

3.数字导航功能

   4.自定义容器高度和宽度

5.可设置滑动速度、是否自动、停顿间隔

6.支持Jquery的easing效果(更多效果需要easing插件的支持,默认是swing)

flashSlider的使用方法

  1.首先是是Html标记

    <div id="slider"><ul><li><img src="data:images/01.jpg" alt="" />li><li><img src="data:images/02.jpg" alt="" />li><li><img src="data:images/03.jpg" alt="" />li><li><img src="data:images/04.jpg" alt="" />li><li><img src="data:images/05.jpg" alt="" />li>ul>div>

2.然后调用jQuery库和flashSlider插件

    <script src="javascript/jquery-1.3.2.min.js" type="text/javascript">script><script src="javascript/jquery.flashSlider-1.0.min.js" type="text/javascript">script>

3.初始化代码

    <script type="text/javascript">$(document).ready(function() {$("#slider").flashSlider();});script>

4.加入css样式

/*容器*/
slider ul, #slider li
{margin: 0;padding: 0;list-style: none;
}
/*数字导航样式*/
#flashnvanum
{bottom: 10px;position: absolute;right: 20px;width: 90px;
}
#flashnvanum span
{background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0;color: #86A2B8;cursor: pointer;float: left;font-family: Arial;font-size: 12px;height: 15px;line-height: 15px;margin: 1px;text-align: center;width: 15px;
}
#flashnvanum span.on
{background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;color: #FFFFFF;height: 15px;line-height: 15px;width: 15px;
}

flashSlider的默认参数

    //默认值$.fn.flashSlider.defaults = {controlsShow: true, //是否显示数字导航vertical: false, //纵向还是横向滑动speed: 800, //滑动速度auto: true, //是否自定滑动pause: 2000, //两次滑动暂停时间easing: "swing", //easing效果,默认swing,更多效果需要easing插件支持height: 0, //容器高度,不设置自动获取图片高度width: 0//容器宽度,不设置自动获取图片宽度}

源代码: http://files.cnblogs.com/dushouke/jquery.flashSlider1.0.rar

转载于:https://www.cnblogs.com/dushouke/archive/2009/12/30/1636390.html

flashSlider——基于Jquery的图片展示插件相关推荐

  1. 【精心挑选】10款基于 jQuery 的图片360度旋转插件

    之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

  2. 基于Jquery的图片自动分组且自适应页面的缩略图展示特效

    今天分享的是一款基于Jquery的图片自动分组且自适应页面的缩略图展示特效,通俗一点说就是JS相册,不过是用JQuery做的,相当不错! This experimental jQuery plugin ...

  3. 10 个 jQuery 的360 度图片展示插件

    整合jQuery的全景图片展示插件,能帮助你的网站访客更好的浏览你的网站图片.帮助你构建虚拟旅程,全景展示和滚动,无限的图片幻灯,希望大家喜欢! 相关的插件:分享8个图片360度旋转展示的jQuery ...

  4. 精心挑选10款基于 jQuery 的图片360度旋转插件

    之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

  5. 10 个非常酷的基于jQuery的菜单效果插件

    除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1.  右击菜单 一个创建右击菜单的插件,简洁且易用. 源 ...

  6. php星级评分,jQuery_基于jQuery的星级评分插件,首先看一下运行效果如下图所 - phpStudy...

    基于jQuery的星级评分插件 首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮. 一.原理本程序的原理是这样的:一个&qu ...

  7. java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件

    [Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...

  8. 13款基于jQuery Mobile的布局插件和示例

    现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...

  9. jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可...

    jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可 转载于:https://www.cnblogs.com/npk19195global/p/4482 ...

最新文章

  1. 网易有道周枫:AI正带来革命性变化,但在线教育的核心是内容
  2. MySQL · 捉虫动态 · event_scheduler 慢日志记错
  3. 【Paper】2007_Consensus control for a class of networks of dynamic agents 二阶静态一致性
  4. 李雷和韩梅梅的一次转账事务–事务系统概述
  5. r语言t检验输出检验统计量_数据统计的理解和运用(四)列联表之卡方检验
  6. 脱式计算机在线使用,脱式计算,
  7. MinGW 与MSVC的区别
  8. 抽象工厂产品等级结构与产品族
  9. 渝粤教育 陕西师范大学 《证券投资学[专升本]》作业
  10. Deep Learning 10_深度学习UFLDL教程:Convolution and Pooling_exercise(斯坦福大学深度学习教程)...
  11. 介绍某现金贷平台的决策规则
  12. 帆软报表(FineReport) 的初步学习和使用
  13. 小码农也有大梦想!人机猜拳java项目代码
  14. linux fuse文件系统在 android fuse sdcard的 运用
  15. csbte路点机器人_反恐精英csbte地图
  16. 关于简单的factorymode
  17. 树莓派做百度云盘离线下载器BaiduPCS-Go web,树莓派与windows互传文件
  18. css渐变背景色与切角
  19. android发短信!渣本毕业两年经验,终局之战
  20. 卸载神器——IObit Uninstaller

热门文章

  1. JQuery的$.extend()的源码
  2. LeetCode(530)——二叉搜索树的最小绝对差(JavaScript)
  3. LeetCode(868)——二进制间距(JavaScript)
  4. 零基础带你学习MySQL—primary key主键(二十三)
  5. 什么样的摄影题材更能吸引大众的目光?
  6. 没有朋友,一个人旅行是什么感受?
  7. 西游中算命先生袁守诚泄露了天机,为何却是泾河龙王被砍头?
  8. 有时候能讲出来,比沉默要好吧
  9. 中间环节越多,大家就越赚钱?
  10. 在React中测试和调试