实例代码详解jquery.slides.js

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的全部代码，希望大家喜欢。

赞 (0)

相关推荐

  • imageVue的Slideshow模块使用技巧

    Slideshow模块可以用幻灯片的形式展示你的图片,该模块功能强大.本文将介绍如何利用Slideshow在选择某个分类之前用幻灯片的形式展示自己设定好的图片.语言描述可能不太直观,具体效果请看我的相册. 下面我介绍一下这种效果的实现方法,在开始之前请大家检查一下自己的imageVue相册目录中是否有slideshow.swf和slideshow.ini这两个文件,如果没有上述文件,请从这个http://www.mycodes.net/soft/6156.htm链接中下载一个imageVue相册

  • jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(

  • 基于jQuery全屏焦点图左右切换插件responsiveslides

    基于jQuery全屏焦点图左右切换插件responsiveslides

    基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览    源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,

  • JQuery slideshow的一个小问题(如何发现及解决过程)

    第一阶段,试用slideshow 在做一个网页homepage的时候,想用slideshow［1］做图片切换效果,其中js部分代码如下: 复制代码 代码如下: function next_slide() { var $active = $('#bitware-overlay img.active'); if ($active.length == 0) $active = $('#bitware-overlay img:last'); var $next = $active.next().leng

  • 实例代码详解jquery.slides.js

    Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件. Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项. 用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片.它附带充分的说明和示例. 废话不多说了,直接给大家贴代码了 $(function(){ $("#slides").slidesjs({ play: { active: true, // [boolean] Generate the

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • JS动画实现回调地狱promise的实例代码详解

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate</title> <style> .ball { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 20px; } .ball1 { ba

  • 使用 Node.js 实现图片的动态裁切及算法实例代码详解

    背景&概览 目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片. 一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用.所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片. URL 的设计 图片 URL 需要包含图片 id.尺寸.质量等信息.有两种

  • JS字符串与二进制的相互转化实例代码详解

    JS字符串与二进制的相互转化实例代码详解

    JS字符串与二进制的相互转化的方法,具体代码如下所示: //字符串转ascii码,用charCodeAt(); //ascii码转字符串,用fromCharCode(); var str = "A"; var code = str.charCodeAt(); var str2 = String.fromCharCode(code); 十进制转二进制 var a = "i"; console.log(a.charCodeAt()); //105 console.log

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • js实现弹出框的拖拽效果实例代码详解

    具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&

  • 使用 Opentype.js 生成字体子集的实例代码详解

    字体子集是将字体文件中部分多余的字符删除,来减小文件大小,从而在 Web 端使用或嵌入到其他应用或系统中,在网上可以找到不少这方面的工具. Opentype.js是一套可以支持浏览器环境和 Node.js 环境的开源 OpenType 字体读写库,利用这个库可以很轻松实现浏览器环境和 Node.js 环境的字体子集功能. 在浏览器环境创建字体子集工具 首先创建一个简单的 HTML界面,包括一个选取字体文件按钮,一个输入框用于输入保留的字符,和一个保存下载按钮. HTML <!DOCTYPE ht

  • 在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解

    WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. 在疫情期间哪里也去不了,在家没事就研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件已经更新了,有些配置已经不太一样了,所以按照以前的步骤会有问题.折腾了一阵终于跑起来了,记录一下. 一个简单的聊天室html页面 这个页面使用simple-webrtc来实现webrtc的通讯,sim

随机推荐