flashSlider——基于Jquery的图片展示插件
大多数的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的图片展示插件相关推荐
- 【精心挑选】10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
- 基于Jquery的图片自动分组且自适应页面的缩略图展示特效
今天分享的是一款基于Jquery的图片自动分组且自适应页面的缩略图展示特效,通俗一点说就是JS相册,不过是用JQuery做的,相当不错! This experimental jQuery plugin ...
- 10 个 jQuery 的360 度图片展示插件
整合jQuery的全景图片展示插件,能帮助你的网站访客更好的浏览你的网站图片.帮助你构建虚拟旅程,全景展示和滚动,无限的图片幻灯,希望大家喜欢! 相关的插件:分享8个图片360度旋转展示的jQuery ...
- 精心挑选10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
- 10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单 一个创建右击菜单的插件,简洁且易用. 源 ...
- php星级评分,jQuery_基于jQuery的星级评分插件,首先看一下运行效果如下图所 - phpStudy...
基于jQuery的星级评分插件 首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮. 一.原理本程序的原理是这样的:一个&qu ...
- java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件
[Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...
- 13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
- jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可...
jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可 转载于:https://www.cnblogs.com/npk19195global/p/4482 ...
最新文章
- 网易有道周枫:AI正带来革命性变化,但在线教育的核心是内容
- MySQL · 捉虫动态 · event_scheduler 慢日志记错
- 【Paper】2007_Consensus control for a class of networks of dynamic agents 二阶静态一致性
- 李雷和韩梅梅的一次转账事务–事务系统概述
- r语言t检验输出检验统计量_数据统计的理解和运用(四)列联表之卡方检验
- 脱式计算机在线使用,脱式计算,
- MinGW 与MSVC的区别
- 抽象工厂产品等级结构与产品族
- 渝粤教育 陕西师范大学 《证券投资学[专升本]》作业
- Deep Learning 10_深度学习UFLDL教程:Convolution and Pooling_exercise(斯坦福大学深度学习教程)...
- 介绍某现金贷平台的决策规则
- 帆软报表(FineReport) 的初步学习和使用
- 小码农也有大梦想!人机猜拳java项目代码
- linux fuse文件系统在 android fuse sdcard的 运用
- csbte路点机器人_反恐精英csbte地图
- 关于简单的factorymode
- 树莓派做百度云盘离线下载器BaiduPCS-Go web,树莓派与windows互传文件
- css渐变背景色与切角
- android发短信!渣本毕业两年经验,终局之战
- 卸载神器——IObit Uninstaller