examples/fullFeatured.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="cache-control" content="max-age=0" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>fullFeatured - slidePage.js</title>
	<link rel="stylesheet" type="text/css" href="../dist/slidePage.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
	<style type="text/css">
		html,
		body {
			width: 100%;
			height: 100%;
		}

		body {
			margin: 0;
			padding: 0;
			background: #000;
		}

		ul {
			list-style: none;
		}

		.slide-page h2 {
			margin: 0;
			padding: 20px 0;
			text-align: center;
		}

		.slide-page p {
			box-sizing: border-box;
			padding: 10px 20px;
			text-align: center;
		}

		.prev-page,
		.next-page {
			display: block;
			width: 25px;
			height: 25px;
			line-height: 26px;
			position: absolute;
			right: 2px;
			z-index: 9999;
			background: rgba(255, 255, 255, .5);
			border-radius: 50%;
			font-size: 14px;
			color: #666;
			text-align: center;
		}

		.prev-page {
			top: 0;
		}

		.next-page {
			bottom: 0;
		}

		.prev-page:active {
			background: rgba(155, 155, 155, .5);
		}

		.next-page:active {
			background: rgba(155, 155, 155, .5);
		}

		.pagination {
			width: 30px;
			height: auto;
			position: fixed;
			top: 50%;
			right: 5px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			padding: 40px 0;
			z-index: 1;
			transform: translate(0, -50%);
		}

		.pagination a {
			width: 25px;
			height: 25px;
			display: block;
			line-height: 28px;
			text-align: center;
			padding-left: 3px;
		}

		.pagination a:after {
			content: "";
			width: 15px;
			height: 15px;
			border-radius: 50%;
			display: inline-block;
			background: rgba(0, 0, 0, .5);
			-webkit-transition: background .3s ease;
			-moz-transition: background .3s ease;
			-ms-transition: background .3s ease;
			-o-transition: background .3s ease;
			transition: background .3s ease;
		}

		.pagination a.active:after {
			background: rgba(255, 255, 255, .5);
		}

		.add,
		.remove,
		.play {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -20px;
			margin-left: -50px;
			width: 100px;
			height: 100px;
			webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			padding: 38px 0;
			box-sizing: border-box;
			border-radius: 50%;
			background-color: rgb(47, 95, 178);
			color: #fff;
			text-align: center;
			font-size: 14px;
			text-decoration: none;
		}

		.play {
			background-color: rgb(178, 79, 65);
		}

		.play:hover {
			background-color: rgb(189, 80, 66);
		}

		.play:active {
			background-color: rgb(141, 60, 50);
		}

		.add:hover {
			background-color: rgb(57, 123, 219);
		}

		.add:active {
			background-color: rgb(31, 79, 134);
		}

		.remove {
			background-color: rgb(151, 43, 43);
		}

		.remove:hover {
			background-color: rgb(151, 43, 43);
		}

		.remove:active {
			background-color: rgb(151, 43, 43);
		}

		.page1 {
			background-color: #99CC33;
		}

		.page2 {
			background-color: #99CC66;
		}

		.page3 {
			background-color: #99CCCC;
		}

		.page4 {
			background-color: #CCCC33;
		}

		.page5 {
			background-color: #CCCC66;
		}

		.page6 {
			background-color: rgb(204, 177, 102);
		}

		.page1 .step1 {
			position: absolute;
			top: 100px;
			left: 19%;
			text-align: center;
			width: 100px;
			height: 100px;
			background-color: rgb(178, 116, 57);
			border-radius: 50%;
		}

		.page1 .step2 {
			position: absolute;
			bottom: 100px;
			right: 19%;
			text-align: center;
			width: 100px;
			height: 100px;
			background-color: rgb(116, 178, 9);
		}

		.page2 .step1 {
			position: absolute;
			top: 100px;
			right: 5%;
			text-align: center;
			width: 100px;
			height: 100px;
			background-color: rgb(82, 110, 178);
			border-radius: 50%;
		}

		.page2 .step3 {
			position: absolute;
			bottom: 60px;
			left: 19%;
			text-align: center;
			width: 150px;
			height: 150px;
			background-color: rgb(178, 79, 54);
		}

		.page2 .step2 {
			position: absolute;
			top: 100px;
			left: 19%;
			text-align: center;
			width: 100px;
			height: 100px;
			background-color: rgb(116, 178, 9);
		}

		.page3 .step1 {
			position: absolute;
			top: 100px;
			left: 19%;
			text-align: center;
			width: 100px;
			height: 100px;
			background-color: rgb(178, 79, 65);
			border-radius: 50%;
		}

		.page3 .step2 {
			position: absolute;
			bottom: 100px;
			right: 19%;
			text-align: center;
			width: 100px;
			height: 100px;
			background-color: rgb(52, 178, 89);
		}

		.page4 .container {
			padding-bottom: 20px;
		}

		.page4 ul {
			margin: 0;
			padding: 0;
			width: 90%;
			margin-left: 5%;
		}

		.page4 ul li {
			width: 100%;
			padding: 100px 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			border-bottom: 1px solid rgb(83, 83, 83);
			background: rgba(255, 255, 255, .5);
			text-align: center;
		}

		.page5 .step2 {
			position: absolute;
			top: 100px;
			left: 19%;
			text-align: center;
			width: 150px;
			height: 100px;
			background-color: rgb(178, 159, 44);
		}

		.page5 .step1 {
			position: absolute;
			bottom: 100px;
			left: 19%;
			text-align: center;
			width: 100px;
			height: 100px;
			background-color: rgb(178, 72, 91);
		}

		.page5 .step3 {
			position: absolute;
			bottom: 100px;
			left: 60%;
			text-align: center;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: rgb(93, 163, 178);
		}
	</style>
</head>

<body ontouchstart="">
	<div class="slide-container" id="slidePage-container">
		<div class="slide-page page1">
			<div class="container">
				<h2>Page1 - 动画效果</h2>
				<div class="step step1 animated fadeIn" data-delay="1000"></div>
				<div class="step step2 animated fadeIn"></div>
			</div>
		</div>
		<div class="slide-page page2">
			<div class="container">
				<h2>Page2 - 延迟播放动画</h2>
				<div class="step step1 animated bounceIn" data-delay="1000"></div>
				<div class="step step2 animated flipInX" data-delay="1500"></div>
				<div class="step step3 animated flipInY" data-delay="2000"></div>
			</div>
		</div>
		<div class="slide-page page3">
			<div class="container">
				<h2>Page3 - 手动播放动画</h2>
				<a class="play" href="javascript:slide.slideFire(3)">点击播放动画</a>
				<div class="lazy step1 animated zoomInDown"></div>
				<div class="lazy step2 animated rollIn"></div>
			</div>
		</div>
		<div class="slide-page page4">
			<div class="container">
				<h2>Page4 - 滚动条滚动</h2>
				<p>当内容长度超过屏幕<br/>会自动变成原生滚动条方式</p>
				<ul>
					<li>滚动内容 - 第1条</li>
					<li>滚动内容 - 第2条</li>
					<li>滚动内容 - 第3条</li>
					<li>滚动内容 - 第4条</li>
					<li>滚动内容 - 最后1条内容</li>
				</ul>
			</div>
		</div>
		<div class="slide-page page5">
			<div class="container">
				<h2>Page5 - 动态添加page</h2>
				<a href="javascript:appendpage()" class="add">添加Page</a>
			</div>
		</div>
		<nav class="pagination" id="pagination">
			<div class="prev-page" onclick="slide.slidePrev()">&Lambda;</div>
			<div class="pagination-page"></div>
			<div class="next-page" onclick="slide.slideNext()">V</div>
		</nav>
	</div>
	<script type="text/javascript" src="../dist/slidePage.min.js"></script>
	<script type="text/javascript">
		function GetQueryString(name){
			var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r!=null)return  unescape(r[2]); return null;
		}
		pageParams = GetQueryString('page') * 1;

		renderPagination()
		var initPage = pageParams || 1
		var currentPage = initPage
		var slide = new slidePage({
			slidePages: '.slide-page',
			slideContainer: '#slidePage-container',
			refresh: true,
			page: initPage,
			before: function (origin, diraction, target) {
				pagepages = document.querySelectorAll('#pagination a')
				pagepages[origin - 1].classList.remove('active')
				pagepages[target - 1].classList.add('active')
				currentPage = target
			},
			after: function (origin, diraction, target) {
			},
		})
		window.slide = slide

		// -- 由于slidePage不提供分页组件，所以以下是当前示例的分页器逻辑
		pagination.querySelectorAll('a')[initPage - 1].classList.add('active')
		function renderPagination() {
			var pagination = document.querySelector('#pagination');
			var len = document.querySelectorAll('.slide-page').length;
			var paginationContent = ''
			// 渲染页码
			for (var i = 1; i <= len; i++) {
				paginationContent += '<a onclick="slide.slideTo(' + i + ')"></a>';
			}
			pagination.querySelector('.pagination-page').innerHTML = paginationContent;
		}
		function appendpage() {
			var len = document.querySelectorAll('.slide-page').length;
			el = document.createElement('div');
			el.innerHTML = '<div class="slide-page page6"> <h2>Page' + (len + 1) + ' - 删除Page</h2> <a href="javascript:removepage()" class="remove">删除Page' + (len + 1) + '</a> </div>'
			document.querySelector('#slidePage-container').appendChild(el.children[0])
			// 增加节点后更新页码
			renderPagination()
			pagination.querySelectorAll('a')[currentPage - 1].classList.add('active')
			slide.update()
		}
		function removepage() {
			var len = document.querySelectorAll('.slide-page').length;
			var page6 = document.querySelectorAll('.slide-page')[len - 1];
			document.querySelector('#slidePage-container').removeChild(page6)
			// 删除节点后更新页码
			renderPagination()
			pagination.querySelectorAll('a')[currentPage === len ? 0 : currentPage - 1].classList.add('active')
			slide.update()
		}
	</script>
</body>

</html>