利用slide3D.js实现五种轮播效果:slide、flip、turn、flat、fragment
可以自主选择是否添加分页器,是否循环等,替换source图片就能用起来了~
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://os.alipayobjects.com/rmsportal/cfYsvciteYQGywxceeGI.css" />
		<style id="stylesheet">
			html,body{
				width: 100%;
				height: 100%;
			}
			.slide3D img{
				width: 100%;
			}
			.container3D{
				background: #eee;
				margin:10px;
				float:left;
			}
			.title{
				padding:10px;
				color:#fff;
				font-size:18px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="title">轮播图</div>
			<div class="container3D slide">
				<div class="wrapper3D">
					<div class="slide3D">
						<img src="https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg" alt="" />
					</div>
					<div class="slide3D">
						<img src="https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg" alt="" />
					</div>
					<div class="slide3D">
						<img src="https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg" alt="" />
					</div>
					<div class="slide3D">
						<img src="https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg" alt="" />
					</div>
					<div class="slide3D">
						<img src="https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg" alt="" />
					</div>
				</div>
				<div class="slide3D-pagination"></div>
				<div class="slide3D-prev-button"></div>
				<div class="slide3D-next-button"></div>
			</div>
			<div class="container3D flip">
				<div class="wrapper3D">
					
				</div>
				<div class="slide3D-pagination"></div>
				<div class="slide3D-prev-button"></div>
				<div class="slide3D-next-button"></div>
			</div>
			<div class="container3D turn">
				<div class="wrapper3D">
					
				</div>
				<div class="slide3D-pagination"></div>
				<div class="slide3D-prev-button"></div>
				<div class="slide3D-next-button"></div>
			</div>
			<div class="container3D flat">
				<div class="wrapper3D">
					
				</div>
				<div class="slide3D-pagination"></div>
				<div class="slide3D-prev-button"></div>
				<div class="slide3D-next-button"></div>
			</div>
			<div class="container3D fragment">
				<div class="wrapper3D">
					
				</div>
				<div class="slide3D-pagination"></div>
				<div class="slide3D-prev-button"></div>
				<div class="slide3D-next-button"></div>
			</div>
		</div>
		<script src="https://os.alipayobjects.com/rmsportal/RnYtVBKOUzXXOiZIqFtF.js"></script>
		<script id="scripts">
		    var width = 400;
		    var height = 178;
			var mySlide = new Slide3D('.slide', {
				width: width,
				height:height,
				effect: 'slide',
				paginationClickable: true,
				pagination: true,  // 是否添加分页器
				loop:true,  //是否循环,除“slide”外,其他动画默认循环
				autoplay: 2000,
				autoplayDisableOnInteraction : false
			});
			var mySlide2 = new Slide3D('.flip', {
				width: width,
				height:height,
				effect: 'flip',  // flip | turn | slide | flat | fragment
				sources: ['https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
				box:{
					rows: 6,  // 切割行
					cols: 3  // 切割列
				},
				pagination: true,  // 是否添加分页器
				paginationClickable: true,
				autoplay: 2000,
				autoplayDisableOnInteraction : false
			});
			var mySlide3 = new Slide3D('.turn', {
				width: width,
				height:height,
				effect: 'turn',  // flip | turn | slide | flat | fragment
				sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
				box:{
					rows: 6,  // 切割行
					cols: 3  // 切割列
				},
				pagination: true,  // 是否添加分页器
				paginationClickable: true,
				autoplay: 2000
//				autoplayDisableOnInteraction : false
			});
			var mySlide4 = new Slide3D('.flat', {
				width: width,
				height:height,
				effect: 'flat',  // flip | turn | slide | flat | fragment
				sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
				box:{
					rows: 6,  // 切割行
					cols: 10  // 切割列
				},
				pagination: true,  // 是否添加分页器
				paginationClickable: true,
				autoplay: 2000,
				autoplayDisableOnInteraction : false
			});
			var mySlide5 = new Slide3D('.fragment', {
				width: width,
				height:height,
				effect: 'fragment',  // flip | turn | slide | flat | fragment
				sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
				'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
				box:{
					rows: 6,  // 切割行
					cols: 3  // 切割列
				},
				pagination: true,  // 是否添加分页器
				paginationClickable: true,
				autoplay: 2000,
				autoplayDisableOnInteraction : false
			});
		</script>
	</body>
</html>