实例代码详解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 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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 curl 上传文件代码实例
2015/04/27 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
研究生自我鉴定范文
2013/10/30 职场文书
九年级体育教学反思
2014/01/23 职场文书
高三政治教学反思
2014/02/06 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
单位考核鉴定意见
2015/06/05 职场文书
开学第一周值周总结
2015/07/16 职场文书
病假条格式范文
2015/08/17 职场文书
诚信高考倡议书
2019/06/24 职场文书