Css+jQuery幻灯片的使用教程

Posted 2020-07-03

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

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

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

目录

1. 基本的html结构
2. 基本CSS代码
3. 基本的初始化javascript代码
4. 官方文档解释 版本119
1. preloadboolean
3. preloadImagestring
4. containerstring
5. generateNextPrevboolean
6. nextstring
7. prevstring
8. paginationboolean
9. generatePaginationboolean
10. paginationClassstring
11. currentClassstring

 

 

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

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

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

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

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

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

 

基本的HTML结构

[html] view plain copy

 

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代码

[css] view plain copy

 

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 plain copy

 

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

官方文档解释 （版本1.1.9）

preload(boolean)

当参数设置为 true 的时候，表示在加载相册中照片的过程中显示 加载图片，设置为false的时候则表示不显示  加载图片

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     preload: true  
4.   });  
5. });  

默认值为： false

 

preloadImage(string)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     preload: true,  
4.     preloadImage: ‘/img/loading.gif‘  
5.   });  
6. });  

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

 

 

container(string)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     container: ‘slides_container‘  
4.   });  
5. });  

默认值为："slides_container"

 

 

generateNextPrev(boolean)

 

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     generateNextPrev: true  
4.   });  
5. });  

默认值为：false

 

 

next(string)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     next: ‘next‘  
4.   });  
5. });  

默认值为："next"

 

prev(string)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     prev: ‘prev‘  
4.   });  
5. });  

默认值为： "prev"

 

pagination(boolean)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     pagination: true  
4.   });  
5. });  

generatePagination(boolean)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     generatePagination: true  
4.   });  
5. });  

默认值为：true

 

paginationClass(string)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     paginationClass: ‘pagination‘  
4.   });  
5. });  

默认值为："pagination"

 

 

currentClass(string)

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

[javascript] view plain copy

 

1. $(function(){  
2.   $("#slides").slides({  
3.     currentClass: ‘current‘  
4.   });  
5. });  

默认值为："current"