JQuery插件之图片轮播插件–slideBox
浏览数：40 /
时间：2015年06月09日
来源：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: };
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
