实例代码详解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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
JS实现评价的星星功能
Aug 20 Javascript
vue 子组件和父组件传值的示例
Sep 11 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比较多维数组中值的大小排序实现代码
2012/09/08 PHP
基于PHP文件操作的详解
2013/06/05 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
如何用Python合并lmdb文件
2018/07/02 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
趣味运动会活动方案
2014/02/12 职场文书
珍惜资源的建议书
2014/08/26 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
老干部座谈会主持词
2015/07/03 职场文书