实例代码详解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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
Nginx实现反向代理
2017/09/20 Servers
如何在PHP中使用数组
2020/06/09 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
python引用DLL文件的方法
2015/05/11 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
自我推荐书
2013/12/04 职场文书
房屋转让协议书范本
2014/04/11 职场文书
营销学习心得体会
2014/09/12 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
庆祝国庆节标语
2014/10/09 职场文书
财务负责人岗位职责
2015/02/03 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android