实例代码详解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在页面中添加和除移DOM示例代码
Jun 24 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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之第十天
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
javascript history对象详解
2017/02/09 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python中map()与zip()操作方法
2016/02/27 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python实现像awk一样分割字符串
2020/09/15 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
50道外企软件测试面试题
2014/08/18 面试题
求职简历自荐信
2013/10/20 职场文书
三问三解心得体会
2014/09/05 职场文书
迎国庆演讲稿
2014/09/15 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
毕业实习指导教师评语
2014/12/31 职场文书