使用flexisel.js制作响应式图片左右滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

关于jquery.flexisel.js

Flexisel 它是一款响应式图像轮播，具有专门用于调整轮播以适应移动和平板设备的选项。 调整浏览器窗口大小，Flexisel 会做出响应调整。您还可以根据屏幕宽度更改显示的项目数量！还有丰富的参数设置可以控制滚动的更多细节。

关键代码

<script type="text/javascript">
    $(window).load(function () {
        $("#flexiselDemo").flexisel({
            visibleItems: 4, //指定在一行中显示的项数。‌
            animationSpeed: 1000, //定义动画的持续时间，‌以毫秒为单位。‌
            autoPlay: true, //控制是否自动播放旋转木马。‌
            autoPlaySpeed: 3000, //播放间隔时间
            pauseOnHover: true, //控制鼠标悬停是否停止
            enableResponsiveBreakpoints: true, //是否开启响应式
            responsiveBreakpoints: {// 响应式端点
                portrait: {//项目名，可随意命名
                    changePoint: 480, //屏幕最大像素，意思为当屏幕最大像素为480时，只显示一个Item，即例子只显示一张图片。
                    visibleItems: 1 //只显示一个Item，下面的雷同
                },
                landscape: {
                    changePoint: 640,
                    visibleItems: 2
                },
                tablet: {
                    changePoint: 768,
                    visibleItems: 3
                }
            }
        });
    }); 

</script>

参数说明

  • visibleItems Integer 指定在一行中显示的项数。‌例如，‌在较小的屏幕上可能希望显示较少的项，‌而在较大的屏幕上则可能希望显示更多的项。‌

  • itemsToScroll Integer 设置一次要滚动的初始项目数。注意：此值将被较小或较大屏幕宽度的响应式断点设置覆盖

  • animationSpeed Integer 定义动画的持续时间，‌以毫秒为单位。‌

  • infinite Boolean 设置轮播是否无限循环

  • navigationTargetSelector String 使用此选择器将向元素添加左/右箭头，而不是默认的

  • autoPlay Object 控制是否自动播放旋转木马。‌

  • loaded func 滑块加载并初始化后运行的回调函数。

  • before func 在幻灯片切换之前运行的回调函数。

  • after func 幻灯片切换后运行的回调函数。

  • resize func 调整浏览器大小事件完成后运行的回调函数。