轮播平滑移动

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		
		li {
			list-style: none;
			display: inline-block;
		}
		
		.box {
			width: 100px;
			height: 100px;
			margin: 0 auto;
			overflow: hidden;
		}
		
		.box ul {
			width: 700px;
			height: 100px;
			font-size: 0;
			position: relative;
			/*transition: all 1s ease;*/
		}
		
		.box li {
			/*position: absolute;*/
			font-size: 15px;
		}
		
		.box li:nth-of-type(1) {
			width: 100px;
			height: 100px;
			background-color: green;
			position: relative;
		}
		
		.box li:nth-of-type(2) {
			width: 100px;
			height: 100px;
			background-color: red;
			position: relative;
		}
		
		.box li:nth-of-type(3) {
			width: 100px;
			height: 100px;
			background-color: blue;
			position: relative;
		}
		
		.box li:nth-of-type(4) {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: relative;
		}
		
		.box li:nth-of-type(5) {
			width: 100px;
			height: 100px;
			background-color: green;
			position: relative;
		}
		
		.box li:nth-of-type(6) {
			width: 100px;
			height: 100px;
			background-color: red;
			position: relative;
		}
		
		.act {
			margin: 0 auto;
			width: 100px;
		}
		
		.act li {
			cursor: pointer;
		}
		
		button {
			display: block;
			width: 50px;
			margin: 0 auto;
		}
	</style>

	<body>
		<div class="box">
			<ul>
				<li>4</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>1</li>
			</ul>
		</div>
		<ul class="act">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<button>NEXT</button>
			<button>Pre</button>
		</ul>

	</body>
	<script type="text/javascript">
		var arrbu = document.getElementsByTagName("button");
		var oUL = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0];
		var arrli = oUL.getElementsByTagName("li")
		var arrlii = document.getElementsByClassName("act")[0].getElementsByTagName("li");
		for(i = 0; i < arrli.length; i++) {
			oUL.style.left = -100 + "px";
		}
		var j = 1;
		var kai = true;
		arrbu[0].onclick = function() {
			if(kai) {
				kai = false;
				j++;
				oUL.style.left = -100 * j + "px";
				oUL.style.transition = "2s ease"
				setTimeout(function() {
					kai = true;
					if(oUL.style.left == "-500px") {
						console.log(1)
						j = 1;
						oUL.style.transition = "";
						oUL.style.left = -arrli[j].offsetWidth + "px";
					}
				}, 1000);
			}
		}
			arrbu[1].onclick = function() {
			if(kai) {
				kai = false;
				j--;
				oUL.style.left = -100 * j + "px";
				oUL.style.transition = "2s ease"
				setTimeout(function() {
					kai = true;
					if(oUL.style.left == "0px") {
						console.log(1)
						j = 4;
						oUL.style.transition = "";
						oUL.style.left = -arrli[j].offsetWidth*j + "px";
					}
				}, 1000);
			}
		}
	
		for(k = 0; k < arrlii.length; k++) {
			oUL.style.transition = "1s ease"
			arrlii[k].onclick = function(ev) {
				var hj = ev.target.innerText;
				oUL.style.left = -100 * hj + "px";
			}
		}
	</script>

</html>
轮播 平滑移动

猜你喜欢
