jquery.roundabout.js酷炫轮播图

最新推荐文章于 2024-03-15 09:32:32 发布

hangGe0111

最新推荐文章于 2024-03-15 09:32:32 发布

阅读量2.5k

点赞数 1

分类专栏：轮子文章标签： roundabout.js 3d旋转

本文链接：https://blog.csdn.net/hangGe0111/article/details/80980872

版权

轮子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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					// 窗口变化响应