JQuery插件之图片轮播插件–slideBox
2023-09-11 14:21:02 时间
来源: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
- jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件
- jQuery分页插件(jquery.page.js)的使用
- 超实用的jQuery淡入淡出焦点图插件 带3D相框
- jQuery插件开发详细教程
- jquery实现动态五角星评分
- jquery 更换皮肤
- jQuery插件 -- Form表单插件jquery.form.js
- Barcode.js功能强大的条码生成jQuery插件
- 第二百一十七节,jQuery EasyUI,NumberSpinner(数字微调)组件
- js/jquery/插件表单验证
- jQuery的类数组对象结构(转)
- jquery插件范例代码
- 【jQuery小实例】js 插件 查看图片
- jQuery插件定义
- 掌握jQuery插件开发
- jQuery插件开发详细教程
- jQuery插件开发的准备
- 电子签章盖章之jQuery插件jquery.zsign
- jQuery图片延迟加载插件:jquery.lazyload
- JQuery,ajax,jsonp 跨域访问
- js 分页插件(jQuery)
- JavaScript学习总结(五)——jQuery插件开发与发布
- js-jquery-插件开发(二)【最终插件是最后一个,中间是过程】
- jquery左右链接类似frameset的插件