SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
来源:互联网 发布:淘宝如何上传宝贝图片 编辑:程序博客网 时间:2024/05/29 02:26
SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件。
Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项。
用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片。它附带充分的说明和示例。
DEMO地址:http://slidesjs.com/
官网地址:http://slidesjs.com/
下载地址:http://slidesjs.com/downloads/slides.zip
基本的HTML结构
- <div id="slides">
- <div class="slides_container">
- <div>
- <h1>Slide 1</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- <div>
- <h1>Slide 2</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- <div>
- <h1>Slide 3</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- <div>
- <h1>Slide 4</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- </div>
- </div>
基本CSS代码
- <style type="text/css" media="screen">
- .slides_container {
- width:470px;
- height:170px;
- }
- .slides_container div {
- width:470px;
- height:170px;
- display:block;
- }
- </style>
基本的初始化JavaScript代码
- <script>
- $(function(){
- $("#slides").slides();
- });
- </script>
官方文档解释 (版本1.1.9)
preload(boolean)
当参数设置为 true 的时候,表示在加载相册中照片的过程中显示 加载图片,设置为false的时候则表示不显示 加载图片
- $(function(){
- $("#slides").slides({
- preload: true
- });
- });
preloadImage(string)
这个属性一般跟上一个 preload(boolean) 一起使用,string内的值表示需要显示的 加载图片 的 路径地址
- $(function(){
- $("#slides").slides({
- preload: true,
- preloadImage: '/img/loading.gif'
- });
- });
container(string)
设置放置图片层的顶级div 样式名称
- $(function(){
- $("#slides").slides({
- container: 'slides_container'
- });
- });
generateNextPrev(boolean)
设置 是否自动生成 上一个 下一个 按钮
- $(function(){
- $("#slides").slides({
- generateNextPrev: true
- });
- });
next(string)
自动生成的下一个按钮 样式名称
- $(function(){
- $("#slides").slides({
- next: 'next'
- });
- });
prev(string)
自动生成的上一个按钮 样式名称
- $(function(){
- $("#slides").slides({
- prev: 'prev'
- });
- });
pagination(boolean)
如果你不使用分页的方式显示图片你可以设置为false ,但是没有必要,推荐不做设置
- $(function(){
- $("#slides").slides({
- pagination: true
- });
- });
generatePagination(boolean)
设置 是否自动生成分页导航层
- $(function(){
- $("#slides").slides({
- generatePagination: true
- });
- });
paginationClass(string)
设置分页导航层的 样式名称
- $(function(){
- $("#slides").slides({
- paginationClass: 'pagination'
- });
- });
currentClass(string)
设置分页导航层中 当前分页项目的样式名称
- $(function(){
- $("#slides").slides({
- currentClass: 'current'
- });
- });
待续...
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- 推荐一款焦点图jQuery插件 SlidesJs
- 推荐一款焦点图jQuery插件 SlidesJs
- jQuery幻灯片插件Skippr
- jQuery幻灯片插件Skippr
- jQuery和CSS3超酷三面板幻灯片插件
- slidesjs轮播插件使用方法
- jquery浮云相册插件
- jquery图标插件flot官方英文文档
- jquery日历插件 FullCalendar -----官方文档翻译
- KinSlideshow幻灯片插件 Jquery幻灯片 图片切换
- Nivo Slider 简要使用文档(jQuery幻灯片插件)
- jquery插件讲解:轮播(SlidesJs)+验证(Validation)
- jquery插件讲解:轮播(SlidesJs)+验证(Validation)
- C#创建Windows Service(Windows 服务)基础教程
- 系统自带由文字内容计算高度
- 自己写的仿SSCOM的串口工具
- Python学习要点和陷阱
- CheckBoxList 的使用
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- 关于Android BroadcastReceiver一点点需要注意的地方
- 基本语言细节--inline函数的几点分析
- Linkedin C++ group 的拒绝邮件
- Linux下安装oracle(转载)
- 关于采集器和浏览器内核的思考(完整版)
- java 泛型学习
- 求四个数的最大公约数
- webservice开发:Myeclipse里整合asix2和hibernate,并同时连sql server 2008 和 oracle 11g个人总结