JQuery插件之图片轮播插件–slideBox-蒲公英云

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

水深无声 2022-08-12 19:28 555阅读 0赞

来源：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:       };