来源：http://www.ido321.com/852.html

今天偶然发现了一个比较好用的图片轮播插件—slideBox

先看看效果：http://slidebox.sinaapp.com/

代码如下

   1: <!doctype html>
   2: <html>
   3: <head>
   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5: <title>slideBox轮播插件</title>
   6: <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
   7: </head>
   8: <body>
   9: <center>
  10: <h5>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-只方不圆）5px（以上各项为默认设置值）</h3>
  11: <div id="demo1" class="slideBox">
  12:   <ul class="items">
  13:     <li><a href="http://www.ido321.com" title="标题一"><img src="./img/1.jpg"></a></li>
  14:     <li><a href="http://www.ido321.com" title="标题二"><img src="./img/0.jpeg"></a></li>
  15:     <li><a href="http://www.ido321.com" title="标题三"><img src="./img/2.png"></a></li>
  16:   </ul>
  17: </div>
  18: <h5>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏</h3>
  19: <div id="demo2" class="slideBox">
  20:   <ul class="items">
  21:    <li><a href="http://www.ido321.com" title="标题一"><img src="./img/1.jpg"></a></li>
  22:     <li><a href="http://www.ido321.com" title="标题二"><img src="./img/0.jpeg"></a></li>
  23:     <li><a href="http://www.ido321.com" title="标题三"><img src="./img/2.png"></a></li>
  24:   </ul>
  25: </div></center>
  26: <script src="js/jquery.min.js" type="text/javascript"></script>
  27: <script src="js/jquery.slideBox.min.js" type="text/javascript"></script>
  28: <script>
  29: jQuery(function($){
  30:     $('#demo1').slideBox();
  31:     $('#demo2').slideBox({
  32:         direction : 'top',//left,top#方向
  33:         duration : 0.3,//滚动持续时间，单位：秒
  34:         easing : 'linear',//swing,linear//滚动特效
  35:         delay : 5,//滚动延迟时间，单位：秒
  36:         startIndex : 1//初始焦点顺序
  37:     });
  38: });
  39: </script>
  40: <div style="text-align:center;clear:both">
  41: <p>适用浏览器：IE8、360、FireFox、Chrome等浏览器</p>
  42: <p>来源：<a href="http://www.ido321.com/" target="_blank">淡忘~浅思</a></p>
  43: </div>
  44: </body>
  45: </html>

在代码中引入了slideBox.css和slideBox.js文件。demo1用的是默认的设置，demo2是自定义设置。

slide的默认设置如下

   1: //默认参数
   2:       var defaults = {
   3:           direction : 'left',//left,top
   4:           duration : 0.6,//unit:seconds
   5:           easing : 'swing',//swing,linear
   6:           delay : 3,//unit:seconds
   7:           startIndex : 0,
   8:           hideClickBar : true,
   9:           clickBarRadius : 5,//unit:px
  10:           hideBottomBar : false,
  11:           width : null,
  12:           height : null
  13:       };

JQuery插件之图片轮播插件–slideBox的更多相关文章

  1. responsiveslides 插件（图片轮播插件）

    参数详解: $(".rslides").responsiveSlides({ auto: true, // Boolean: 设置是否自动播放, true or false spe ...

  2. 面板支持单个，多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  3. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  4. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  5. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  6. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  7. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  9. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

随机推荐

  1. Swift入门（十一）——类型转换与is、as操作

    三种操作:is.as?和as! Swift是强类型语言,但也允许开发者通过is.as?和as!这三种操作来对类型进行判断和强制转换.其中is用作类型判断,而as?和as!则分别是类型转换的可选形式和强 ...

  2. 被称为同步神器的 BTSync，你可以怎么用？

    在这高速运作的信息化时代,使用云端来衔接工作和生活的点滴已是寻常事.可你是否曾扪心自问过:用各大云端备份自己的信息资料,真的安全放心吗? 毫不夸张的说,其实恶意代码和漏洞早已和你如影随形.你甚至都不用 ...

  3. Android给listview的item设定高度

    在item的layout文件中,用android:layout_height设置item的高度.运行,高度设置无效. 解决办法: 给item设定minHeight,即可. -------------- ...

  4. python 批量更换图片格式脚本

    问题:将某文件下的所有jpg的图片更换为png的图片 简单的实现: # -*- coding:utf-8 -*- from os.path import splitext import glob fr ...

  5. Ext2.0之Tabpanel AJAX远程加载多标签页面模式开发技巧

    目前开发的方式是采用远程load页面来实现多页面效果,类似于126邮箱多标签页效果.但是比126邮箱的方式更好,因为页面打开后是load到本地的,126似乎还会重新请求.在近期项目该开发方式已经基本成 ...

  6. TC SRM 593 DIV1 250(dfs)

    这图最多3色就可以 搜2就行了 #include <iostream> #include<cstdio> #include<cstring> #include< ...

  7. UVa 11529 (计数) Strange Tax Calculation

    枚举一个中心点,然后将其他点绕着这个点按照极角排序. 统计这个中心点在外面的三角形的个数,然后用C(n-1, 3)减去这个数就是包含这个点的三角形的数量. 然后再枚举一个起点L,终点为弧度小于π的点R ...

  8. HDU 3746 (KMP求最小循环节) Cyclic Nacklace

    题意: 给出一个字符串,要求在后面添加最少的字符是的新串是循环的,且至少有两个循环节.输出最少需要添加字符的个数. 分析: 假设所给字符串为p[0...l-1],其长度为l 有这样一个结论: 这个串的 ...

  9. bzoj1355: [Baltic2009]Radio Transmission

    将原串看成是循环节的后缀加上若干个循环节,那么考虑每种情况都会发现n-next[n]就是最小循环节.(一开始总输出n...然后发现build_next连调用都没有,%%% #include<cs ...

  10. BZOJ1272: [BeiJingWc2008]Gate Of Babylon

    题解: 多重集合的组合数?还是0-m?有些元素有个数限制? 多重集合的组合数可以插板法,0-m直接利用组合数的公式一遍求出来,个数限制注意到只有15个,那我们就暴力容斥了 AC了真舒畅.. 注意开lo ...