实例代码详解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的IE和火狐的兼容性注意事项
Mar 17 Javascript
js 幻灯片的实现
Dec 06 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
vue实现搜索功能
May 28 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
简介JavaScript错误处理机制
Aug 04 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 地址栏信息的获取代码
2009/01/07 PHP
浅析php单例模式
2014/11/25 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python封装对象实现时间效果
2020/04/23 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python组合无重复三位数的实例
2018/11/13 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
QML使用Python的函数过程解析
2019/09/26 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
离职证明标准格式
2014/09/15 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
技能培训通讯稿
2015/07/18 职场文书
2016年春节问候语
2015/11/11 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS