实例代码详解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 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
vue实现树形菜单效果
Mar 19 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
15条JavaScript最佳实践小结
2013/08/09 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python全排列操作实例分析
2018/07/24 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
大学毕业感言100字
2014/02/03 职场文书
更夫岗位责任制
2014/02/11 职场文书
阅兵口号
2014/06/19 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS