SlidesJS基本使用方法

Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件。

Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项。

用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片。它附带充分的说明和示例。

 

DEMO地址:http://slidesjs.com/

官网地址:http://slidesjs.com/

下载地址:http://slidesjs.com/downloads/slides.zip


基本的HTML结构

  1. <div id="slides">  
  2.   <div class="slides_container">  
  3.     <div>  
  4.       <h1>Slide 1</h1>  
  5.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  6.     </div>  
  7.     <div>  
  8.       <h1>Slide 2</h1>  
  9.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  10.     </div>  
  11.     <div>  
  12.       <h1>Slide 3</h1>  
  13.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  14.     </div>  
  15.     <div>  
  16.       <h1>Slide 4</h1>  
  17.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  18.     </div>  
  19.   </div>  
  20. </div>  

基本CSS代码

  1. <style type="text/css" media="screen">  
  2.   .slides_container {  
  3.     width:470px;  
  4.     height:170px;  
  5.   }  
  6.   .slides_container div {  
  7.     width:470px;  
  8.     height:170px;  
  9.     display:block;  
  10.   }  
  11. </style>    

基本的初始化JavaScript代码

[javascript] view plaincopy
  1. <script>  
  2.   $(function(){  
  3.     $("#slides").slides();  
  4.   });  
  5. </script>  


官方文档解释 (版本1.1.9)

preload(boolean)

当参数设置为 true 的时候,表示在加载相册中照片的过程中显示 加载图片,设置为false的时候则表示不显示  加载图片
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     preload: true  
  4.   });  
  5. });  
默认值为: false


preloadImage(string)

这个属性一般跟上一个 preload(boolean) 一起使用,string内的值表示需要显示的 加载图片 的 路径地址
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     preload: true,  
  4.     preloadImage: '/img/loading.gif'  
  5.   });  
  6. });  
默认值为:"/img/loading.gif"


container(string)

设置放置图片层的顶级div  样式名称
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     container: 'slides_container'  
  4.   });  
  5. });  
默认值为:"slides_container"


generateNextPrev(boolean)

设置 是否自动生成 上一个  下一个 按钮
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     generateNextPrev: true  
  4.   });  
  5. });  
默认值为:false


next(string)

自动生成的下一个按钮 样式名称
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     next: 'next'  
  4.   });  
  5. });  
默认值为:"next"


prev(string)

自动生成的上一个按钮 样式名称
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     prev: 'prev'  
  4.   });  
  5. });  
默认值为: "prev"


pagination(boolean)

如果你不使用分页的方式显示图片你可以设置为false ,但是没有必要,推荐不做设置
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     pagination: true  
  4.   });  
  5. });  


generatePagination(boolean)

设置 是否自动生成分页导航层
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     generatePagination: true  
  4.   });  
  5. });  
默认值为:true


paginationClass(string)

设置分页导航层样式名称
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     paginationClass: 'pagination'  
  4.   });  
  5. });  
默认值为:"pagination"



currentClass(string)

设置分页导航层中 当前分页项目样式名称
[javascript] view plaincopy
  1. $(function(){  
  2.   $("#slides").slides({  
  3.     currentClass: 'current'  
  4.   });  
  5. });  

默认值为:"current"

posted @ 2013-02-19 11:29 MZB大豆 阅读(...) 评论(...) 编辑 收藏