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

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

来源：[http://www.ido321.com/852.html][http_www.ido321.com_852.html]

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

先看看效果：[http://slidebox.sinaapp.com/][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:       };

[http_www.ido321.com_852.html]: http://www.ido321.com/852.html
[http_slidebox.sinaapp.com]: http://slidebox.sinaapp.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件

最近我们为大家分享过不少基于jQuery的图片轮播插件，当然也有很多使用了HTML5和CSS3的相关技术，让整个图片播放器显得更加美观，动画效果显得更加炫酷。这次我们特意为大家

深藏阁楼爱情的钟/ 2022年10月06日 13:53/ 0 赞/ 708 阅读

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

来源：[http://www.ido321.com/852.html][http_www.ido321.com_852.html] 今天偶然发现了一个比较好用的图片

水深无声/ 2022年08月12日 19:28/ 0 赞/ 271 阅读

相关简单图片轮播插件

经常使用别人的插件，现在自己写一个，纪念一下。 jquery.banner.js / banner 0.1 Copyright (c)

待我称王封你为后i/ 2022年08月12日 00:17/ 0 赞/ 214 阅读

相关 Jquery 图片轮播的插件

前提要引入: jquery这是必然不上少的。 <script src="style/js/jquery.min.js"></script> 其次就是引入插件

约定不等于承诺〃/ 2022年08月10日 09:50/ 0 赞/ 215 阅读

相关 Bootstrap轮播插件

> 轮播插件就是将几张同等大小的大图，按照顺序依次播放 <!-- 分析一下轮播插件的组成： 1.最外层容器div:加类class="carousel

Love The Way You Lie/ 2022年06月12日 06:58/ 0 赞/ 229 阅读

相关前端插件之滚动轮播

效果如下： ![20170831130339495][] 1.css代码 <style> wrapperslide{

约定不等于承诺〃/ 2022年06月09日 07:44/ 0 赞/ 214 阅读

相关 [jquery]轮播图片插件

[jquery.Nivoslider.js丰富图片插件参数详解][jquery.Nivoslider.js] Nivoslider是一款基于jQuery的，能实现多种切换

淩亂°似流年/ 2022年06月04日 02:07/ 0 赞/ 308 阅读

相关 Bootstrap 轮播（Carousel）插件

Bootstrap轮播(Carousel)插件 1.页面布局轮播图的容器添加类名 .carousel 声明为相对定位的容器包含所有内容的容器添加类名 .

系统管理员/ 2022年05月28日 02:44/ 0 赞/ 223 阅读

相关使用jQuery封装轮播图插件

先展示一下效果：（因为截图工具的原因，小绿点不能正常展示） ![70][] 插件的拓展方式 (function ($) { //添加自定义jq插件

深碍√TFBOYSˉ_/ 2022年05月19日 10:43/ 0 赞/ 270 阅读

相关基于jquery实现轮播图自动轮播，不用插件

html部分: ![Image 1][] ![Image 1][] ![Image 1][] ![Image 1][] <div class

深藏阁楼爱情的钟/ 2022年04月12日 21:08/ 0 赞/ 629 阅读