实例代码详解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 相关文章推荐
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 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 SPL使用方法和他的威力
2013/11/12 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php函数式编程简单示例
2019/08/08 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
BootStrap中
2016/12/10 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python编程实现希尔排序
2017/04/13 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
技术负责人岗位职责
2015/02/10 职场文书
行政诉讼答辩状
2015/05/21 职场文书
心理学培训心得体会
2016/01/22 职场文书
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android
基于Python实现西西成语接龙小助手
2022/08/05 Golang