使用jquery.roundabout.js制作可以左右切换的3D旋转式幻灯片效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

roundabout 是一款超棒的左右3D旋转式幻灯片jQuery插件， 类似于转盘旋转效果，该插件可以扩展其它更多旋转效果。 本案例介绍如何使用jquery.roundabout.js制作可以左右切换的3D旋转式幻灯片效果，效果整体宽度为1200像素， 通过css控制图片的尺寸可以控制一屏显示多少个图片。本按钮定义了上一个下一个按钮，你可以使用更好的css效果完善它。

那么如何使用这个插件呢？

如何使用

roundabout的使用非常简单。您需要下载必要的文件并将它们放在您的服务器上。然后你只需要将相关文件包含在文档的 head 中：

<!-- 引用 jQuery -->
<script type="text/javascript" src="js/jquery.min.js"> </script> 
<!-- roundabout 脚本 -->
<script src="js/jquery.roundabout.js" type="text/javascript"></script>
<!-- easing 脚本 支持移动的动画效果 -->
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

然后你只需要在 document.ready 上初始化 roundabout （使用选择器它将找到你想要应用 roundabout 的内容）：

关键js与说明

<script>
    $(document).ready(function () {
        //初始化
        $('#featured-area ul').roundabout({
            easing: 'easeOutInCirc',// 移动的动画效果
            duration: 600,// 运动速度
            minScale: 0.6,// 最小缩放值
            autoplay: true,// 自动播放
            autoplayDuration: 4000,// 自动播放的时间
            autoplayPauseOnHover: false,// 鼠标移入元素内是否自动播放，为true不播放，false还自动播
            btnNext: '#bt-next', // 下一个按钮
            btnPrev: '#bt-previous', // 上一个按钮
        });

    });
     
</script>

定义上一个下一个按钮元素，支持图片左右切换效果

参数说明

  • minZ: 100, // 最小的层级

  • maxZ: 280, // 最大的层级

  • minOpacity: 0.4, // 最小透明度

  • maxOpacity: 1.0, // 最大透明度

  • minScale: 0.4, // 最小缩放值

  • maxScale: 1.0, // 最大缩放值

  • duration: 750, // 运动速度

  • btnNext: .ban_r_btn, // 下一个按钮

  • btnNextCallback: function() {}, // 下一个按钮 回调

  • btnPrev: .ban_l_btn, // 上一个按钮

  • btnPrevCallback: function() {}, // 上一个按钮回调

  • btnToggleAutoplay: null, // 按钮点击开启自动播放或关闭

  • btnStartAutoplay: null, // 按钮点击开启自动播放

  • btnStopAutoplay: null, // 按钮点击关闭自动播放

  • easing: "swing", // 移动的动画效果 swing流畅

  • clickToFocus: true, // 点击当前轮播设为焦点

  • clickToFocusCallback: function() {},// 点击当前轮播设为焦点回调

  • focusBearing: 0.0, // 修改焦点的位置 360度的位置

  • shape: "lazySusan",

  • debug: false,

  • childSelector: "li", // 子元素

  • startingChild: 1, // 默认的显示第几张图片

  • reflect: false, // 为true时是从左向右移动，为false从右向左移动

  • floatComparisonThreshold: 0.001,

  • autoplay: false, // 自动播放

  • autoplayDuration: 1000, // 自动播放的时间

  • autoplayPauseOnHover: false, // 鼠标移入元素内是否自动播放，为true不播放，false还自动播

  • autoplayCallback: function() {}, // 自动轮播的回调

  • autoplayInitialDelay: 0, // 从第几秒时，开始自动播放（默认毫秒）开始的第一次管用

  • enableDrag: false, // 在移动端可以拖拽播放

  • dropDuration: 600, // 拖拽的运动速度

  • dropEasing: "swing", // 拖拽的运动动画

  • dropAnimateTo: "nearest", // 拖拽的动画方式

  • dropCallback: function() { var ithis = $(".roundabout-in-focus")[0]['classList'][0]}, // 拖拽的回调函数

  • dragAxis: "x", // 拖拽的方向x轴方向和y轴方向 切换

  • dragFactor: 4,

  • triggerFocusEvents: true, // 触发焦点事件

  • triggerBlurEvents: true, // 触发失去焦点事件

  • responsive: false // 窗口变化响应