SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
2016-04-11 14:59
956 查看
SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
标签: jquery文档functionstringdiv相册2012-04-19 15:23 39317人阅读 评论(9) 收藏 举报
分类:
Jquery综合
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件。
Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项。
用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片。它附带充分的说明和示例。
DEMO地址:http://slidesjs.com/
官网地址:http://slidesjs.com/
下载地址:http://slidesjs.com/downloads/slides.zip
基本的HTML结构
[html] viewplain copy
<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代码
[css] viewplain copy
<style type="text/css" media="screen">
.slides_container {
width:470px;
height:170px;
}
.slides_container div {
width:470px;
height:170px;
display:block;
}
</style>
基本的初始化JavaScript代码
[javascript] viewplain copy
<script>
$(function(){
$("#slides").slides();
});
</script>
官方文档解释 (版本1.1.9)
preload(boolean)
当参数设置为 true 的时候,表示在加载相册中照片的过程中显示 加载图片,设置为false的时候则表示不显示 加载图片[javascript] view
plain copy
$(function(){
$("#slides").slides({
preload: true
});
});
默认值为: false
preloadImage(string)
这个属性一般跟上一个 preload(boolean) 一起使用,string内的值表示需要显示的 加载图片 的 路径地址[javascript] view
plain copy
$(function(){
$("#slides").slides({
preload: true,
preloadImage: '/img/loading.gif'
});
});
默认值为:"/img/loading.gif"
container(string)
设置放置图片层的顶级div 样式名称[javascript] view
plain copy
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
默认值为:"slides_container"
generateNextPrev(boolean)
设置 是否自动生成 上一个 下一个 按钮[javascript] view
plain copy
$(function(){
$("#slides").slides({
generateNextPrev: true
});
});
默认值为:false
next(string)
自动生成的下一个按钮 样式名称[javascript] view
plain copy
$(function(){
$("#slides").slides({
next: 'next'
});
});
默认值为:"next"
prev(string)
自动生成的上一个按钮 样式名称[javascript] view
plain copy
$(function(){
$("#slides").slides({
prev: 'prev'
});
});
默认值为: "prev"
pagination(boolean)
如果你不使用分页的方式显示图片你可以设置为false ,但是没有必要,推荐不做设置[javascript] view
plain copy
$(function(){
$("#slides").slides({
pagination: true
});
});
generatePagination(boolean)
设置 是否自动生成分页导航层[javascript] view
plain copy
$(function(){
$("#slides").slides({
generatePagination: true
});
});
默认值为:true
paginationClass(string)
设置分页导航层的 样式名称[javascript] view
plain copy
$(function(){
$("#slides").slides({
paginationClass: 'pagination'
});
});
默认值为:"pagination"
currentClass(string)
设置分页导航层中 当前分页项目的样式名称[javascript] view
plain copy
$(function(){
$("#slides").slides({
currentClass: 'current'
});
});
默认值为:"current"
待续...
相关文章推荐
- jquery中常用的SET和GET$(”#msg”).html循环介绍
- jquery 消息提示美化 非阻塞式 信息/消息提示框
- jquery中validation表单验证
- jquery checkbox勾选/取消勾选的诡异问题
- JQuery keyUp和keyDown的区别
- jquery中$.post()方法的简单实例
- jQuery源码解析(5)—— Animation动画
- jQuery对checkbox的操作
- 最近在MyEclipse中导入jquery出现的错误,与解决办法
- jQuery Event.stopPropagation() 函数详解
- jquery全屏插件
- 使用jquery模拟键盘事件,但window系统并不会真的响应事件,只是浏览器当前页面会响应而已
- jquery 鼠标右键事件、左键单击事件判定
- jQuery和DOM对象之间的转换
- jQuery URL Parser
- 新到手的项目应该如何着手呢?
- jquery validate应该注意的小问题
- jquery简单插件到复杂插件(3)--顶部导航固定
- jQuery EasyUI使用教程之创建一个属性网格
- jQuery获取多种值的方法