实例代码详解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中 For, While与递归的用法
May 07 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
javascript实现日历效果
Jun 17 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中Date获取时间不正确怎么办
2008/06/05 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP反向代理类代码
2014/08/15 PHP
php函数与传递参数实例分析
2014/11/15 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python反转序列的方法实例分析
2018/03/21 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
编辑求职信样本
2013/12/16 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014年电厂工作总结
2014/12/04 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年工程师工作总结
2015/04/30 职场文书
辩护词格式
2015/05/22 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
工作会议简报
2015/07/20 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
如何写好活动总结
2019/06/21 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL