ResponsiveSlides.js - jQuery响应式轮播图插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

ResponsiveSlides.js是一个基于jQuery的响应式幻灯片插件，用于创建漂亮的全宽度滑块幻灯片。

可以轻松地设置和定制幻灯片的动画效果、自动播放和分页控制等选项。使用ResponsiveSlides.js，您可以在任何设备上创建优雅的幻灯片展示，并提升您网站或应用程序的视觉效果。

如何使用：

引用jQuery.js 和 responsiveslides.js

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/responsiveslides.js" type="text/javascript"></script>

调用 responsiveslides.js

<script type="text/javascript">
    $(function () {
        $("#slider").responsiveSlides({
            nav: true, //是否显示左右导航，true或false
            pager: true, //是否显示页码，true或false
            maxwidth: 1920, //幻灯片的最大宽度
            namespace: "callbacks" //修改默认的容器名称
        });
    });
</script>

更多参数说明

  • 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 函数 空 切换完成后回调函数