实例代码详解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  THIS详解 面向对象
Mar 25 Javascript
javascript自定义的addClass()方法
May 28 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jquery仿微信聊天界面
May 06 jQuery
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
js实现坦克移动小游戏
Oct 28 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/05/29 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Bootstrap插件全集
2016/07/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
js实现动态增加文件域表单功能
2018/10/22 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
详解python statistics模块及函数用法
2019/10/27 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
基于python实现删除指定文件类型
2020/07/21 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
化工专业推荐信范文
2013/11/28 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
golang的文件创建及读写操作
2022/04/14 Golang