flashSlider——基于Jquery的图片展示插件
2009-12-30 21:49
771 查看
pre
{
background-color:#EEEEEE;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
margin-bottom: 10px;
max-height: 600px;
overflow: auto;
padding: 5px;
width: auto;
}
/*
Visual Studio-like style based on original C# coloring by Jason Diamond
*/
.comment,
.annotation,
.template_comment,
.diff .header,
.chunk,
.apache .cbracket {
color: #008000;
}
.keyword,
.id,
.title,
.built_in,
.aggregate,
.smalltalk .class,
.winutils,
.bash .variable {
color: #0000ff;
}
.string,
.title,
.parent,
.tag .attribute .value,
.rules .value,
.rules .value .number,
.ruby .symbol,
.instancevar,
.aggregate,
.template_tag,
.django .variable,
.addition,
.flow,
.stream,
.apache .tag,
.date {
color: #a31515;
}
.ruby .string,
.decorator,
.filter .argument,
.localvars,
.array,
.attr_selector,
.pseudo,
.pi,
.doctype,
.deletion,
.envvar,
.shebang,
.preprocessor,
.userType,
.apache .sqbracket {
color: #2b91af;
}
.phpdoc,
.javadoc,
.xmlDocTag {
color: #808080;
}
大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slider基础上改动的,由于有点像flash图片展示的效果,所以就叫flashSlider吧
先看看效果:
/*容器*/
#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(http://images.cnblogs.com/cnblogs_com/dushouke/226855/o_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(http://images.cnblogs.com/cnblogs_com/dushouke/226855/o_flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
$(document).ready(function() {
$("#slider").flashSlider({speed:400});
});
flashSlider的功能
1.支持纵向滑动和横向滑动
2.支持自动滚动和连续滑动
3.数字导航功能
4.自定义容器高度和宽度
5.可设置滑动速度、是否自动、停顿间隔
6.支持Jquery的easing效果(更多效果需要easing插件的支持,默认是swing)
flashSlider的使用方法
1.首先是是Html标记
2.然后调用jQuery库和flashSlider插件
3.初始化代码
4.加入css样式
flashSlider的默认参数
源代码: http://files.cnblogs.com/dushouke/jquery.flashSlider1.0.rar
{
background-color:#EEEEEE;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
margin-bottom: 10px;
max-height: 600px;
overflow: auto;
padding: 5px;
width: auto;
}
/*
Visual Studio-like style based on original C# coloring by Jason Diamond
*/
.comment,
.annotation,
.template_comment,
.diff .header,
.chunk,
.apache .cbracket {
color: #008000;
}
.keyword,
.id,
.title,
.built_in,
.aggregate,
.smalltalk .class,
.winutils,
.bash .variable {
color: #0000ff;
}
.string,
.title,
.parent,
.tag .attribute .value,
.rules .value,
.rules .value .number,
.ruby .symbol,
.instancevar,
.aggregate,
.template_tag,
.django .variable,
.addition,
.flow,
.stream,
.apache .tag,
.date {
color: #a31515;
}
.ruby .string,
.decorator,
.filter .argument,
.localvars,
.array,
.attr_selector,
.pseudo,
.pi,
.doctype,
.deletion,
.envvar,
.shebang,
.preprocessor,
.userType,
.apache .sqbracket {
color: #2b91af;
}
.phpdoc,
.javadoc,
.xmlDocTag {
color: #808080;
}
大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slider基础上改动的,由于有点像flash图片展示的效果,所以就叫flashSlider吧
先看看效果:
/*容器*/
#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(http://images.cnblogs.com/cnblogs_com/dushouke/226855/o_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(http://images.cnblogs.com/cnblogs_com/dushouke/226855/o_flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
$(document).ready(function() {
$("#slider").flashSlider({speed:400});
});
flashSlider的功能
1.支持纵向滑动和横向滑动
2.支持自动滚动和连续滑动
3.数字导航功能
4.自定义容器高度和宽度
5.可设置滑动速度、是否自动、停顿间隔
6.支持Jquery的easing效果(更多效果需要easing插件的支持,默认是swing)
flashSlider的使用方法
1.首先是是Html标记
2.然后调用jQuery库和flashSlider插件
3.初始化代码
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
相关文章推荐
- MicroCoder flashSlider——基于Jquery的图片展示插件
- 基于jquery 插件 ajax 上传图片
- 基于jquery的图片展示
- jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。
- 令人惊异的jQuery图片展示插件。
- jQuery图片展示插件Galleria
- 轻量级网页图片滚动展示jquery插件FlexSlider(附下载)
- 基于jQuery图片平滑连续滚动插件
- 【精心挑选】推荐几款非常棒的 jQuery 全景图片展示插件
- 【精心挑选】推荐几款非常棒的 jQuery 全景图片展示插件
- 基于jQuery图片元素网格布局插件
- jQuery Lightbox(balupton版)图片展示插件讲解
- Lazy Load - jQuery plugin for lazy loading images(基于jQuery的图片延迟加载插件)
- jQuery中图片展示插件highslide.js的简单dom
- 10款基于jQuery的图片滑块焦点图插件
- 基于jquery的图片滚动插件代码
- 基于jQuery的图片展示(横向滚动,可左右控制)
- jquery超强插件-颜色获取,右键菜单,图片展示
- 33个优秀的 jQuery 图片展示插件分享