lisniuse-ES6jsCarousel
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no" />
	<meta charset="UTF-8">
	<title>Carousel Demo</title>
	<style>
		html, body, ul {
			text-align: center;
			margin:0px;
			padding: 0px;
			color:#000;
		}
		.container ul li {
			float: left;
			list-style: none;
			height: 100%;
			width: 100%;
		}
		#carousel img {
			width: 200px;
		}
		.container {
			margin: auto;
			width: 600px;
			height: 300px;
			box-shadow: 0px 0px 10px gray;
		}
	</style>
</head>
<body>
	<div id="carousel" class="container">
		<ul>
			<li><a href="http://baidu.com/"><img src="img/1.jpg" alt=""></a></li>
			<li><img src="img/2.jpg" alt=""></li>
			<li><img src="img/3.jpg" alt=""></li>
			<li><img src="img/4.jpg" alt=""></li>
		</ul>
	</div>
	<script src="carousel.js"></script>
	<script>
		let playBox = new Carousel({
			containerId : 'carousel',
			showSwitchBtn : false,
			showSwitchCtrl : true,
			playSlowMotion : true,
			playAuto : true,
			playInterval : 2000,
			playFn : function () {
				console.log(playBox.index);
			}
		});
	</script>
</body>
</html>