jquery.roundabout.js 应用及api参数
饶承宣
<!--2019年-01月-15号 星期二 14:11:03 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>roundabout</title>
<link rel="icon" type="image/x-icon" href="https://mat1.gtimg.com/www/icon/favicon2.ico">
<link rel="stylesheet" href="https://guangzhou.auto.qq.com/css/conmon.css">
<style>
.che {width: 1200px;height: 500px;margin: 100px auto;overflow: hidden;}
.ac-1000 {width: 1200px;margin: 0 auto;position: relative;}
#featured-area {height:479px; width: 1200px; margin:0 auto 0; border:none; position:absolute;top:2px;}
#featured-area img{border:none;}
.roundabout-holder {list-style:none;height:454px; width:850px; margin:0 auto;}
.roundabout-moveable-item {font-size:12px!important; height:454px; width:850px; cursor:pointer;}
.roundabout-moveable-item img {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus {cursor:auto;}
.roundabout-in-focus:hover {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span {display:none; font-size:11px;}
.roundabout-in-focus:hover span {display:inline; position:absolute; bottom:5px; right:5px; padding:0px 0px; background:#f9f9f9; color:#8A428B; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 11px; border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa;}
.roundabout a:active, .roundabout a:focus, .roundabout a:visited {outline:none; text-decoration:none;}
.roundabout li {margin:0}
#featured-area .ban_l_btn,#featured-area .ban_r_btn{ position: absolute; top: 50%;margin-top:-50px; left:0; display: block; width: 64px; height: 100px; background: url(http://img1.gtimg.com/autoguangzhou/pics/hv1/67/88/210/13677757.png) no-repeat; z-index: 999; overflow: hidden; }
#featured-area .ban_r_btn{ left:auto; right:0;background: url(http://img1.gtimg.com/autoguangzhou/pics/hv1/68/88/210/13677758.png) no-repeat }
</style>
</head>
<body>
<div class="che">
<div class="ac-1000">
<div id="featured-area" class="ppt">
<ul class="roundabout-holder" style="padding: 0px; position: relative; z-index: 100;" id="roundabout"></ul>
<a href="javascript:void(0)" class="ban_l_btn"></a>
<a href="javascript:void(0)" class="ban_r_btn"></a>
</div>
</div>
</div>
<script src="https://dongguan.auto.qq.com/js/publicJS/jquery.min.js"></script>
<script src='//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js'></script>
<script src="http://guangzhou.auto.qq.com/js/jquery.roundabout.min.js"></script>
<script>
//腾讯视频页面数据列表
var SliderList = [
//点播视频id
{ 'vid': 'e0802a5djd6' },
{ 'vid': 'o079490inf8' },
{ 'vid': 'l0779s34u42' },
{ 'vid': 'g07134npc3b' },
{ 'vid': 'n0698751r93' },
{ 'vid': 's0664xs3ro9' }
];
//设置一些全局属性
var n = 0;
var _l = SliderList.length;
//3D轮播渲染
$(document).ready(function () {
$('.che ul').roundabout({
duration: 750,
btnPrev: ".ban_r_btn", // 右按钮
btnNext: ".ban_l_btn", // 左按钮
enableDrag: true, // 在移动端可以拖拽播放
reflect: false, // 为 true 时是从左向右移动，为 false 从右向左移动
minOpacity: 0.1, //最小的透明度
maxOpacity: 1, //最大的透明度
autoplay: true, //是否开启自动播放
autoplayDuration: 4000, //自动播放时间
autoplayPauseOnHover: true, // 鼠标移入元素内是否自动播放，为true不播放，false还自动播放
btnNextCallback: function() {
n++
if(n>=_l){
n=0;
}
},
btnPrevCallback: function() {
n--;
if(n<0){
n=_l-1;
}
},
autoplayCallback: function() { // 自动轮播的回调
n++;
var id = $('.roundabout-in-focus').prev().attr('id');
var vid = $('.roundabout-in-focus').prev().attr('data-vid');
if(n>=_l){
n=0;
id = $('.che ul>li').eq(n-1).attr('id');
vid = $('.che ul>li').eq(n-1).attr('data-vid');
}
videoPlay(id,vid).pause();
}
});
});
</script>
<script>
//封装腾讯视频播放器方法
function videoPlay(el,vid) {
return new Txplayer({
containerId: el,
vid: vid,
width: '850',
height: '454',
autoplay: false,
});
}
SliderList.map(function (v,i) {
var $li = '<li id="bf'+i+'" class="roundabout-moveable-item" data-vid="'+v.vid+'"></li>';
$('#roundabout').append($li);
videoPlay(('bf'+i),v.vid);
});
//左右切换视频时 停止单前视频播放
$('.ban_l_btn,.ban_r_btn').click(function(){
var id = $('.roundabout-in-focus').attr('id');
var vid = $('.roundabout-in-focus').attr('data-vid');
videoPlay(id,vid).pause();
});
//鼠标放置在左右切换箭头上的时候 停止自动播放
/**
* 添加这个的主要原因是 切换的按钮的层级高 插件设置的鼠标移入元素停止播放在比他层级高的元素上是没有效果的 所以我们需要手动在去设置一下
*/
$('.ban_l_btn,.ban_r_btn,.che ul').hover(function(){
$('.che ul').roundabout("stopAutoplay")
},function(){
$('.che ul').roundabout("startAutoplay")
})
</script>
<body>
</html>
插件的其他参数
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 // 窗口变化响应
类似资料：