实例代码详解jquery.slides.js


Posted in Javascript onNovember 16, 2015

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

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

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

废话不多说了,直接给大家贴代码了

$(function(){
 $("#slides").slidesjs({
  play: {
  active: true,
   // [boolean] Generate the play and stop buttons.
   // You cannot use your own buttons. Sorry.
  effect: "slide",
   // [string] Can be either "slide" or "fade".
  interval: ,
   // [number] Time spent on each slide in milliseconds.
  auto: false,
   // [boolean] Start playing the slideshow on load.
  swap: true,
   // [boolean] show/hide stop and play buttons
  pauseOnHover: false,
   // [boolean] pause a playing slideshow on hover
  restartDelay: 
   // [number] restart delay on inactive slideshow
  }
 });
 });

前台:

<!doctype html>
 <head>
 <style>
  /* Prevents slides from flashing */
  #slides {
  display:none;
  }
 </style>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="jquery.slides.min.js"></script>
 <script>
  $(function(){
  $("#slides").slidesjs({
   width: ,
   height: 
  });
  });
 </script>
 </head>
 <body>
 <div id="slides">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
 </div>
 </body>

以上内容是关于jquery.slides.js的全部代码,希望大家喜欢。

Javascript 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JavaScript交换两个变量方法实例
Nov 25 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 #Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 #Javascript
常用javascript表单验证汇总
Jul 20 #Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 #Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 #Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 #Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP实现的策略模式示例
2019/03/20 PHP
php新建文件的方法实例
2019/09/26 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
js实现微博发布小功能
2017/01/12 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
详解JavaScript中的强制类型转换
2019/04/15 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
.NET面试10题
2014/02/24 面试题
中学生的1000字检讨书
2014/10/11 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
springboot用户数据修改的详细实现
2022/04/06 Java/Android