实例代码详解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中清空数组的三种方法分享
Apr 07 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
js倒计时抢购实例
Dec 20 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Vue组件通信的几种实现方法
Apr 25 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实现重载的常用方法实例详解
2017/10/18 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
小程序实现留言板
2018/11/02 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
基于Django的python验证码(实例讲解)
2017/10/23 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python迭代器常见用法实例分析
2019/11/22 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
安全生产先进个人材料
2014/02/06 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
文明旅游倡议书
2015/04/28 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
对公司的意见和建议
2015/06/04 职场文书