前端旋转木马效果

旋转木马是经典的一个案例，通常电商首页会使用轮播图或者旋转木马。
废话不多说，直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转木马</title>
	<style>
	/*预设样式*/
	blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
	    margin:0;
	    padding:0;
	}
	body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
	ol,ul{list-style:none}
	a{text-decoration:none}
	fieldset,img{border:0;vertical-align:top;}
	a,input,button,select,textarea{outline:none;}
	a,button{cursor:pointer;}

	/*内部样式*/
	.wrap{
		width: 1200px;
		margin: 10px auto;
	}
	.slide{
		height: 500px;
		position: relative;
	}
	.slide li{
		position: absolute;
		left: 200px;
		top: 0;
	}
	.slide li img {
		width: 100%;
	}
	.arrow {
		opacity: 0;
	}
	.prev, .next {
		width: 76px;
		height: 112px;
		position: absolute;
		top: 50%;
		margin-top: -56px;
		background: url() no-repeat;
		z-index: 99;
	}
	.next {
		right: 0;
		background-image: url();
	}
	</style>
</head>
<body>
	<div class="wrap" id="wrap">
		<div class="slide" id="wrap">
			<ul>
				<li><a href="#"></a><img src="#"></li>
				<li><a href="#"></a><img src="#"></li>
				<li><a href="#"></a><img src="#"></li>
				<li><a href="#"></a><img src="#"></li>
				<li><a href="#"></a><img src="#"></li>
			</ul>
			<div class="arrow">
				<a href="#" class="next"></a><a href="#" class="next"></a>
			</div>
		</div>
	</div>
	<script>
	// 公共JS代码
	function show(ele){
		ele.style.display = "block";
	}

	function getStyle(ele,attr){
		if(window.getComputedStyle){
			return window.getComputedStyle(ele,null)[attr];
		}
		return ele.currentStyle[attr];
	}

	function client(){
		if(window.innerHeight !== undefined){
			return {
				"width":window.innerWidth,
				"height":window.innerHeight
			}
		}else if(document.compatMode === "CSS1Compat"){
			return {
				"width":document.documentElement.clientWidth,
				"height":document.documentElement.clientHeight
			}
		}else {
			return {
				"width":document.body.clientWidth,
				"height":document.body.clientHeight
			}
		}
	}
	</script>
	<script>
		// 旋转木马私有代码
		window.onload = function(){
			var arr = [
				{
					width:400,
					top:700,
					left:50,
					opacity:20,
					zIndex:2
				},
				{
					width:400,
					top:700,
					left:50,
					opacity:20,
					zIndex:2
				},
				{
					width:400,
					top:700,
					left:50,
					opacity:20,
					zIndex:2
				},
				{
					width:400,
					top:700,
					left:50,
					opacity:20,
					zIndex:2
				},
				{
					width:400,
					top:700,
					left:50,
					opacity:20,
					zIndex:2
				}
			];
			// 0获取元素
			var slide = document.getElementById('slide');
			var LiArr = document.getElementsByTagName('li');
			var arrow = slide.children[1];
			var arrowChildren = arrow.children;
			var flag = true;

			// 1.鼠标经过轮播图，左右按钮显示隐藏
			slide.onmouseenter = function(){
				animate(arrow,{"opacity":100});
			}
			slide.onmouseleave = function(){
				animate(arrow,{"opacity":0});
			}

			move();

			// 2.两侧按钮绑定事件
			arrowChildren[0].onclick = function(){
				if(flag){
					flag = false;
					move(true);
				}
			}
			arrowChildren[2].onclick = function(){
				if(flag){
					flag = false;
					move(false);
				}
			}

			// 3.主函数
			fucntion move(bool){
				if(bool !== undefined){
					if(bool){
						arr.unshift(arr.pop());
					}else{
						arr.push(arr.shift());
					}
				}
				for(var i = 0; i < LiArr.length;i++){
					animate(LiArr[i],arr[i],function(){
						flag = true;
					});
				}
			}
		}
	</script>
</body>
</html>
前端旋转木马效果

猜你喜欢
