jQuery3D轮播插件

jQuery3D轮播插件

一、官网与文档

官网地址：https://github.com/fredleblanc/roundabout

二、引入

• 引用jquery.js和jquery.roundabout.js、jquery.easing.js

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.roundabout.js"></script>

三、使用

• html 结构

<div class="live-box">
    <ul id="liveSlide">
        <li>
            <img src="img/pic1.png" alt="">
            <div class="desc">
                <p>介绍文字1</p>
            </div>
        </li>
        <li>
            <img src="img/pic2.png" alt="">
            <div class="desc">
                <p>介绍文字2</p>
            </div>
        </li>
        <li>
            <img src="img/pic3.png" alt="">
            <div class="desc">
                <p>介绍文字3</p>
            </div>
        </li>
    </ul>
    <div class="live-dots" id="dotList"></div>
</div>

• 简单样式

.live-box ul {
    /*可通过调整这个的宽度来改变整个轮播占的宽度*/
    width: 400px;
    height:508px;
    margin: 55px auto 20px;
    transform-style: preserve-3d;
}
.live-box li {
    width:1045px;height:608px;position: relative;
}
.live-box img {
    width: 100%;
}
.live-dots{
    width: 100%;
    position:absolute;
    bottom: 0px;
    text-align: center;
}
.live-dots span{
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 10px;
    margin: 0 5px;
    background:#e6cb0e;
}
.live-dots span.active{
    background: #2de633;
}
.desc {
    position: absolute;
    overflow: hidden;
    width: 943px;
    height: 119px;
    left: 54px;
    bottom: 36px;
    font-size: 16px;
    color: #fff;
}
.desc p{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 30px;
    opacity: 0;
    transition: all 0.2s;
    transform: translate(0, 100%);
    background: rgba(0, 0, 0, 0.6);
}
.roundabout-in-focus .desc p{
    opacity: 1;
    transform: translate(0, 0);
}

• 初始化

var $liveSlide = $('#liveSlide'),
    $liveSlideLi = $('#liveSlide li')
//指示器
var $dotList = $('#dotList'),
    dotHtml = '';
$liveSlide.roundabout({
    startingChild: 1, // 默认的显示第几张图片
    easing: 'easeOutInCirc',
    duration: 600, // 运动速度
    autoplay: false, // 自动播放
    minScale: 0.8,
    autoplayDuration: 5000,
    minOpacity: 0.5,//最小的透明度
    maxOpacity: 1,//最大的透明度
    reflect: false,
    startingChild: 0,
    autoplayInitialDelay: 5000,
    autoplayPauseOnHover: false,
    enableDrag: true,
    btnPrev: "#preBtn", // 右按钮
    btnNext: "#nextBtn",  // 左按钮
    clickToFocusCallback: function () {// 点击当前轮播设为焦点回调
        liveChange()
    },
    autoplayCallback: function () {  // 自动轮播的回调
        liveChange()
    },
    dropCallback: function () {// 拖拽的回调函数
        liveChange()
    },
    btnNextCallback: function () {//点击左按钮回调函数
        liveChange()
    },
    btnPrevCallback: function () {//点击右按钮回调函数
        liveChange()
    }
});
var liveChange = function () {
    var index = $('.roundabout-in-focus').index()
    $dotList.find('span').removeClass('active').eq(index).addClass('active')

}
//生成指示点
for (var i = 0; i < $liveSlide.children().length; i++) {
    dotHtml += "<span></span>";
}
$dotList.html(dotHtml);
liveChange();
//点击指示点
$dotList.on('click', 'span', function () {
    var e = $(this).index();
    $liveSlideLi.eq(e).trigger("click");
    $(this).addClass('active').siblings().removeClass('active');
});

• 注1：除图片以外的其他元素，如文字，在插件中不会进行处理。

四、参数

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() {},		// 拖拽的回调函数
dragAxis: "x",						// 拖拽的方向x轴方向和y轴方向 切换
dragFactor: 4,
triggerFocusEvents: true,			
triggerBlurEvents: true,
responsive: false					// 窗口变化响应