实例代码详解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 07 Javascript
jquery中this的使用说明
Sep 06 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
Require.js的基本用法详解
Jul 03 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
JS使用new操作符创建对象的方法分析
May 30 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
Python群发邮件实例代码
2014/01/03 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python3监控疫情的完整代码
2020/02/20 Python
python ETL工具 pyetl
2020/06/07 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
元旦活动感言
2014/03/08 职场文书
养牛场项目建议书
2014/05/13 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Python自动化爬取天眼查数据的实现
2021/06/15 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python