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

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

官方文档解释 (版本1.1.9)

preload(boolean)

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

默认值为: false

preloadImage(string)

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

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

container(string)

设置放置图片层的顶级div  样式名称
  1. $(function(){
  2. $("#slides").slides({
  3. container: 'slides_container'
  4. });
  5. });

默认值为:"slides_container"

generateNextPrev(boolean)

设置 是否自动生成 上一个  下一个 按钮
  1. $(function(){
  2. $("#slides").slides({
  3. generateNextPrev: true
  4. });
  5. });

默认值为:false


next(string)

自动生成的下一个按钮 样式名称
  1. $(function(){
  2. $("#slides").slides({
  3. next: 'next'
  4. });
  5. });

默认值为:"next"

prev(string)

自动生成的上一个按钮 样式名称
  1. $(function(){
  2. $("#slides").slides({
  3. prev: 'prev'
  4. });
  5. });

默认值为: "prev"

pagination(boolean)

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

generatePagination(boolean)

设置 是否自动生成分页导航层
  1. $(function(){
  2. $("#slides").slides({
  3. generatePagination: true
  4. });
  5. });

默认值为:true

paginationClass(string)

设置分页导航层样式名称
  1. $(function(){
  2. $("#slides").slides({
  3. paginationClass: 'pagination'
  4. });
  5. });

默认值为:"pagination"

currentClass(string)

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

默认值为:"current"

SlidesJS基本使用方法和官方文档解释的更多相关文章

  1. Spring Boot配置文件规则以及使用方法官方文档查找以及Spring项目的官方文档查找方法

    比如要使用Spring Boot实现一个功能,最直接的方式是Google,但是往往搜索出来的都比较乱,关键是乱在不同的版本上,比如1.x版本和2.x版本的配置是不一样的.最明显区别是在使用Thymel ...

  2. 从LFS官方文档构建完整Linux系统

    从LFS官方文档构建完整Linux系统 http://www.cnblogs.com/sonofdark/p/4962609.html 这不是新手教程!!! Parallels Desktop (为防 ...

  3. MySQL8.0.28安装教程全程参考MySQL官方文档

    前言 为了MySQL8.0.28安装教程我竟然在MySQL官方文档逛了一天,至此献给想入门MySQL8.0的初学者.以目前最新版本的MySQL8.0.28为示例进行安装与初步使用的详细讲解,面向初学者 ...

  4. java中的方法引用(method reference)官方文档总结

    2017/7/5 转载写明出处:http://www.cnblogs.com/daren-lin/p/java-method-reference.html 今天要说的是java中的一项新特性,方法引用 ...

  5. 【AutoMapper官方文档】DTO与Domin Model相互转换(上)

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

  6. 【AutoMapper官方文档】DTO与Domin Model相互转换(中)

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

  7. 【AutoMapper官方文档】DTO与Domin Model相互转换(下)

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

  8. Kotlin开发语言文档(官方文档)-- 目录

    开始阅读Kotlin官方文档.先上文档目录.有些内容还未阅读,有些目录标目翻译还需琢磨琢磨.后续再将具体内容的链接逐步加上. 文档链接:https://kotlinlang.org/docs/kotl ...

  9. 一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel

    今天介绍了官方入门文档中有关PowerBI和Excel的知识.前几篇入门文档有点仓促,加上最近时间的研究,会有更多技巧性和入门型的文章或者视频发布,最后2篇入门文档将更加详细一点,因为部分文章进行简单 ...

随机推荐

  1. 加密算法blowfish 多语言

    php加密算法blowfish <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016-02-14 * Time: ...

  2. C++Primer笔记-----day04

    1.函数指针.函数指针指向某种特定类型,函数的类型由它的返回类型和形参类型决定,与函数名无关.比如:bool lengthCompare(const string &,const string ...

  3. LeetCode Crack Note --- 1. Two Sum

    Discription Given an array of integers, return indices of the two numbers such that they add up to a ...

  4. STL源码剖析之组件

    本篇文章开始,进行STL源码剖析的一些知识点,后续系列笔记全是参照<STL源码剖析>进行学习记录的 STL在现在的大部分项目中,实用性已经没有Boost库好了,毕竟STL中仅仅提供了一些容 ...

  5. shell编程——变量的数值计算

    在shell脚本中,有时候会需要对数值类型的变量进行计算,通常我们用的是(()) [root@localhost collect]# ((a=1+2)) [root@localhost collect ...

  6. wamp 初始化 修改mysql密码

    1.设置phpmyadmin 在WampServer安装完成后,通过http://localhost/打开后可以看到WampServer自带的一个简单的页面,里面有phpinfo.phpmyadmin ...

  7. Culling & Depth Testing

    [Culling & Depth Testing] Culling is an optimization that does not render polygons facing away f ...

  8. 404. Sum of Left Leaves 左叶子之和

    [抄题]: Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are ...

  9. zabbix自定义key监控redis

    一.启动redis-server cd /data/redis redis-server redis.conf (根据自己的环境启动redis) 测试脚本(写入1000个数据): seq |while ...

  10. spring4-1-Spring的简单介绍

    Spring4.0 是 Spring 推出的一个重大版本升级,进一步加强了 Sring 作为 Java 领域第一开源平台的地位.Spring4.0 引入了众多 Java 开发者期盼的新特性,如泛型依赖 ...