首页 > 代码库 > JQuery插件之图片轮播插件–slideBox

JQuery插件之图片轮播插件–slideBox

2024-07-25 05:17:40   219人阅读

来源：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=http://www.mamicode.com/"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.mamicode.com/"http://www.ido321.com" title="标题一"><img src=http://www.mamicode.com/"./img/1.jpg">
  14:     <li><a href=http://www.mamicode.com/"http://www.ido321.com" title="标题二"><img src=http://www.mamicode.com/"./img/0.jpeg">
  15:     <li><a href=http://www.mamicode.com/"http://www.ido321.com" title="标题三"><img src=http://www.mamicode.com/"./img/2.png">
  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.mamicode.com/"http://www.ido321.com" title="标题一"><img src=http://www.mamicode.com/"./img/1.jpg">
  22:     <li><a href=http://www.mamicode.com/"http://www.ido321.com" title="标题二"><img src=http://www.mamicode.com/"./img/0.jpeg">
  23:     <li><a href=http://www.mamicode.com/"http://www.ido321.com" title="标题三"><img src=http://www.mamicode.com/"./img/2.png">
  24:   </ul>
  25: </div></center>
  26: <script src=http://www.mamicode.com/"js/jquery.min.js" type="text/javascript"></script>
  27: <script src=http://www.mamicode.com/"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.mamicode.com/"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


联系
我们