实例代码详解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 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
vue中template的三种写法示例
Oct 21 Javascript
QT与javascript交互数据的实现
May 26 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递归实现层级树状展开
2016/04/01 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
javascript json 新手入门文档
2009/12/03 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python中cPickle类使用方法详解
2018/08/27 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
pandas 空数据处理方法详解
2019/11/02 Python
3种python调用其他脚本的方法
2020/01/06 Python
python爬虫实现获取下一页代码
2020/03/13 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
JAVA程序员面试题
2012/10/03 面试题
丑小鸭教学反思
2014/02/03 职场文书
火灾现场处置方案
2014/05/28 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang