码迷，mamicode.com
首页 > Web开发 > 详细

Css+jQuery幻灯片的使用教程

时间：2016-04-04 16:20:19      阅读：221      评论：0      收藏：0      [点我收藏+]

标签：

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"

Css+jQuery幻灯片的使用教程

标签：

原文地址：http://www.cnblogs.com/luotuo/p/5352083.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！