[代码样式]ResponsiveSlides.js – jQuery幻灯片插件

[代码样式]ResponsiveSlides.js – jQuery幻灯片插件

简介

ResponsiveSlides.js 是一款小巧的 jQuery 响应式幻灯片插件,压缩后不到 4KB。它几乎兼容所有浏览器,包括 IE6 以及各种移动设备上的浏览器。不过它的样式比较简单,如果想要更丰富的效果,你可能需要自定义 CSS。

浏览器兼容

[代码样式]ResponsiveSlides.js – jQuery幻灯片插件 [代码样式]ResponsiveSlides.js – jQuery幻灯片插件 [代码样式]ResponsiveSlides.js – jQuery幻灯片插件 [代码样式]ResponsiveSlides.js – jQuery幻灯片插件 [代码样式]ResponsiveSlides.js – jQuery幻灯片插件
IE6+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/responsiveslides.css">
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/responsiveslides.min.js"></script>

2、HTML

<ul class="rslides" id="dowebok">
    <li><img src="https://www.dowebok.com/images/1.jpg" alt=""></li>
    <li><img src="https://www.dowebok.com/images/2.jpg" alt=""></li>
    <li><img src="https://www.dowebok.com/images/3.jpg" alt=""></li>
</ul>

3、JavaScript

$(function() {
    $('#dowebok').responsiveSlides();
});

配置

属性/方法 类型 默认值 说明
auto 布尔值 true 自动播放
speed 整数 500 动画持续时间,单位为毫秒
timeout 整数 4000 切换间隔,单位为毫秒
pager 布尔值 false 显示页码
nav 布尔值 false 显示左右导航
random 布尔值 false 随机幻灯片顺序
pause 布尔值 false 鼠标悬停在幻灯片上暂停
pauseControls 布尔值 true 鼠标悬停在控制器上暂停
prevText 字符串 Previous “上一个”按钮文本
nextText 字符串 Next “下一个”按钮文本
maxwidth 字符串 幻灯片最大宽度
navContainer 字符串 把控制项放入自定义选择器内
manualControls 字符串 声明自定义分页导航
namespace 字符串 rslides 修改默认的容器名称
before 函数 切换前的回调函数
after 函数 切换完成后回调函数

GitHub 地址:https://github.com/viljamis/ResponsiveSlides.js

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]BoxSlider – jQuery内容滚动/滑动插件

2020-8-24 10:16:50

脚本代码

[代码样式]Ideal Image Slider – 简单的纯JS幻灯片

2020-8-24 10:16:52

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索