SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】

 

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结构

 <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
   });
 });

默认值为：  false

preloadImage(string)

这个属性一般跟上一个  preload(boolean) 一起使用，string内的值表示需要显示的  加载图片 的  路径地址

 $(function(){
   $("#slides").slides({
     preload: true,
     preloadImage: '/img/loading.gif'
   });
 });

默认值为： "/img/loading.gif"

container(string)

设置放置图片层的顶级div   样式名称

 $(function(){
   $("#slides").slides({
     container: 'slides_container'
   });
 });

默认值为： "slides_container"

generateNextPrev(boolean)

设置 是否自动生成  上一个  下一个 按钮

 $(function(){
   $("#slides").slides({
     generateNextPrev: true
   });
 });

默认值为： false

next(string)

自动生成的 下一个按钮 样式名称

 $(function(){
   $("#slides").slides({
     next: 'next'
   });
 });

默认值为： "next"

prev(string)

自动生成的 上一个按钮 样式名称

 $(function(){
   $("#slides").slides({
     prev: 'prev'
   });
 });

默认值为：  "prev"

pagination(boolean)

如果你不使用分页的方式显示图片你可以设置为 false ，但是没有必要，推荐不做设置

 $(function(){
   $("#slides").slides({
     pagination: true
   });
 });

generatePagination(boolean)

设置 是否自动生成 分页导航层

 $(function(){
   $("#slides").slides({
     generatePagination: true
   });
 });

默认值为： true

paginationClass(string)

设置 分页导航层的  样式名称

 $(function(){
   $("#slides").slides({
     paginationClass: 'pagination'
   });
 });

默认值为： "pagination"

currentClass(string)

设置分页导航层中  当前分页项目的 样式名称

 $(function(){
   $("#slides").slides({
     currentClass: 'current'
   });
 });

默认值为： "current"

待续...