SlidesJS基本使用方法和官方文档解释
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)
- $(function(){
- $("#slides").slides({
- preload: true
- });
- });
默认值为: false
preloadImage(string)
- $(function(){
- $("#slides").slides({
- preload: true,
- preloadImage: '/img/loading.gif'
- });
- });
默认值为:"/img/loading.gif"
container(string)
- $(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)
- $(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"
SlidesJS基本使用方法和官方文档解释的更多相关文章
- Spring Boot配置文件规则以及使用方法官方文档查找以及Spring项目的官方文档查找方法
比如要使用Spring Boot实现一个功能,最直接的方式是Google,但是往往搜索出来的都比较乱,关键是乱在不同的版本上,比如1.x版本和2.x版本的配置是不一样的.最明显区别是在使用Thymel ...
- 从LFS官方文档构建完整Linux系统
从LFS官方文档构建完整Linux系统 http://www.cnblogs.com/sonofdark/p/4962609.html 这不是新手教程!!! Parallels Desktop (为防 ...
- MySQL8.0.28安装教程全程参考MySQL官方文档
前言 为了MySQL8.0.28安装教程我竟然在MySQL官方文档逛了一天,至此献给想入门MySQL8.0的初学者.以目前最新版本的MySQL8.0.28为示例进行安装与初步使用的详细讲解,面向初学者 ...
- java中的方法引用(method reference)官方文档总结
2017/7/5 转载写明出处:http://www.cnblogs.com/daren-lin/p/java-method-reference.html 今天要说的是java中的一项新特性,方法引用 ...
- 【AutoMapper官方文档】DTO与Domin Model相互转换(上)
写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...
- 【AutoMapper官方文档】DTO与Domin Model相互转换(中)
写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...
- 【AutoMapper官方文档】DTO与Domin Model相互转换(下)
写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...
- Kotlin开发语言文档(官方文档)-- 目录
开始阅读Kotlin官方文档.先上文档目录.有些内容还未阅读,有些目录标目翻译还需琢磨琢磨.后续再将具体内容的链接逐步加上. 文档链接:https://kotlinlang.org/docs/kotl ...
- 一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel
今天介绍了官方入门文档中有关PowerBI和Excel的知识.前几篇入门文档有点仓促,加上最近时间的研究,会有更多技巧性和入门型的文章或者视频发布,最后2篇入门文档将更加详细一点,因为部分文章进行简单 ...
随机推荐
- 加密算法blowfish 多语言
php加密算法blowfish <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016-02-14 * Time: ...
- C++Primer笔记-----day04
1.函数指针.函数指针指向某种特定类型,函数的类型由它的返回类型和形参类型决定,与函数名无关.比如:bool lengthCompare(const string &,const string ...
- 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 ...
- STL源码剖析之组件
本篇文章开始,进行STL源码剖析的一些知识点,后续系列笔记全是参照<STL源码剖析>进行学习记录的 STL在现在的大部分项目中,实用性已经没有Boost库好了,毕竟STL中仅仅提供了一些容 ...
- shell编程——变量的数值计算
在shell脚本中,有时候会需要对数值类型的变量进行计算,通常我们用的是(()) [root@localhost collect]# ((a=1+2)) [root@localhost collect ...
- wamp 初始化 修改mysql密码
1.设置phpmyadmin 在WampServer安装完成后,通过http://localhost/打开后可以看到WampServer自带的一个简单的页面,里面有phpinfo.phpmyadmin ...
- Culling & Depth Testing
[Culling & Depth Testing] Culling is an optimization that does not render polygons facing away f ...
- 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 ...
- zabbix自定义key监控redis
一.启动redis-server cd /data/redis redis-server redis.conf (根据自己的环境启动redis) 测试脚本(写入1000个数据): seq |while ...
- spring4-1-Spring的简单介绍
Spring4.0 是 Spring 推出的一个重大版本升级,进一步加强了 Sring 作为 Java 领域第一开源平台的地位.Spring4.0 引入了众多 Java 开发者期盼的新特性,如泛型依赖 ...