1.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>适配移动端的拖动效果</title>
<style>
* {
margin: 0;
padding: 0;
border: 0
}
a{
text-decoration: none;
}
.exhibition_hall {
text-align: center;
position: relative;
overflow: hidden
}
.roundabout_box img {
width: 100%
}
.roundabout_box {
height: 425px;
width: 980px;
margin: 40px auto 20px
}
.roundabout-holder {
list-style: none;
width: 500px;
height: 425px;
margin: 0 auto
}
.roundabout-moveable-item {
font-size: 12px!important;
height: 425px;
width: 650px;
cursor: pointer;
background: #f9f9f9
}
.roundabout-moveable-item img {
height: 100%;
width: 100%;
background-color: #fff;
margin: 0
}
.roundabout-in-focus {
cursor: auto;
border-left: 1px #fff solid;
border-right: 1px #fff solid
}
.roundabout-in-focus000:hover {
-webkit-box-shadow: 0 0 20px #787878;
-moz-box-shadow: 0 0 20px #787878;
background: #f9f9f9
}
.roundabout-holder .text {
color: #999
}
.roundabout-in-focus000:hover span {
display: inline;
position: absolute;
bottom: 5px;
right: 5px;
padding: 8px 20px;
background: #f9f9f9;
color: #36c;
z-index: 999;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-left: 1px solid #aaa;
border-top: 1px solid #aaa
}
.btn_l,
.btn_r {
position: absolute;
top: 50%;
margin-top: -34px;
left: -1px;
display: block;
width: 65px;
height: 68px;
background-color: #fff;
z-index: 9;
overflow: hidden;
line-height: 68px;
font-size: 50px;
background-color: orange;
color: #fff;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.btn_r {
left: auto;
right: -1px;
}
</style>
</head>
<body>
<div class="in exhibition_hall">
<div id="" class="roundabout_box">
<ul>
<li>
<a href="#"><img src="http://img18.house365.com/newcms/2017/03/16/148964317858ca26aacf7b5.jpg" alt=""><span class="text">This is Picture one message</span></a>
</li>
<li>
<a href="#"><img src="http://img18.house365.com/newcms/2014/08/08/140746636153e43b79c4445.jpg" alt=""><span class="text">This is Picture two message</span></a>
</li>
<li>
<a href="#"><img src="http://img18.house365.com/newcms/2016/11/24/14799594365836638ca92a3.jpg" alt=""><span class="text">This is Picture three message</span></a>
</li>
<li>
<a href="#"><img src="http://img18.house365.com/newcms/2016/09/22/147451504457e35064c47c2.jpg" alt=""><span class="text">This is Picture four message</span></a>
</li>
</ul>
<a href="javascript:void(0)" class="btn_l"><</a>
<a href="javascript:void(0)" class="btn_r">></a>
</div>
</div>
<!--需要引入jq-->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!--引入roundabout.js插件-->
<script src="https://cdn.bootcss.com/roundabout/2.4.2/jquery.roundabout.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.roundabout_box ul').roundabout({
duration: 600, // 运动速度
autoplay: true, // 自动播放
autoplayDuration: 1500, // 自动播放的时间
minOpacity: 0, //最小的透明度
maxOpacity: 1, //最大的透明度
reflect: true, // 为true时是从左向右移动,为false从右向左移动
startingChild: 2, // 默认的显示第几张图片
autoplayInitialDelay: 5000, // 从第几秒时,开始自动播放(默认毫秒)开始的第一次管用
autoplayPauseOnHover: true, // 鼠标移入元素内是否自动播放,为true不播放,false还自动播放
enableDrag: true, // 在移动端可以拖拽播放
btnPrev: ".btn_r", // 右按钮
btnNext: ".btn_l", // 左按钮
});
});
</script>
</body>
</html>
2.效果
3.说明
参数详细说明参考:
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 // 窗口变化响应