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篇入门文档将更加详细一点,因为部分文章进行简单 ...
随机推荐
- 系统键盘按钮keyCode大全
字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 ...
- 学习 Python 编程的 19 个资源 (转)
学习 Python 编程的 19 个资源 2018-01-07 数据与算法之美 编译:wzhvictor,英文:codecondo segmentfault.com/a/119000000418731 ...
- exited with code 1
brcc32 command line for "Project1.vrc" c:\program files\embarcadero\rad studio\9.0\bin\c ...
- Ryu控制器学习
Ryu 在Mininet环境下实现Ryu为控制器控制ARP报文的实验中学习了Ryu相关的知识,记录如下 官方文档:http://ryu.readthedocs.io/en/latest/getting ...
- STL源码剖析之组件
本篇文章开始,进行STL源码剖析的一些知识点,后续系列笔记全是参照<STL源码剖析>进行学习记录的 STL在现在的大部分项目中,实用性已经没有Boost库好了,毕竟STL中仅仅提供了一些容 ...
- cmder 设置
添加到系统变量 windows10可直接使用小娜搜索环境变量,然后将Cmder.exe所在目录加入Path项即可.之后通过win+r输入cmder即可启动 添加到右键菜单 在管理员权限的命令窗口下(可 ...
- 面试-Android之java基础
1.HashMap是否为线程安全. 不安全的. 2.int[] a ={1,2,3,4}; int[]b =a ; b[0]=3; a[0]的值是改变的. 3.组合模式 安卓listview的不同ce ...
- C#给图片加文字和图片的水印
/// <summary> /// WaterMark 的摘要说明 /// </summary> /// 图片加水印 /// <param name="strC ...
- @EnableAsync annotation metadata was not injected Spring容器启动后访问Servlet报错
@EnableAsync annotation metadata was not injected 2015年12月20日 20:06:54 7570 在初始化spring事务部分碰到该错误, 详细错 ...
- C#在控制台输出异常所在的行数
对于异常,我们经常用try-catch语句来处理,一种常见的方式是在catch语句块用MessageBox.Show("异常")这种弹窗的方式来报告异常.但是有些时候,有些异常发生 ...