C3属性的轮播图（持续更新）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› C++›C++教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　天气好冷，都不想写代码。就先写个没有焦点的轮播图，过两天在补全。

　　用的是CSS3的属性过渡transition 和转换 transfrom:translateX()

　　只做了轮播和鼠标进入停止轮播，离开继续轮播这几项。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style>
		.banner{
			width: 960px;
			height: 360px;
			/* border: 1px solid black; */
			margin: 100px auto;
			overflow: hidden;
			position: relative;
		}
		ul{
			width: 200000px;
			list-style: none;
			height: 360px;
			transform:  translateX(-960px);
			transition: all .5s;
		}
		li{
			float: left;
		}
		img{
			width: 960px;
			height: 360px;
			vertical-align: middle;
			display: block;
		}
		*{
			margin: 0;
			padding: 0;
		}
		.right,.left {
			position: absolute;
			top: 50%;
			font-size: 50px;
			text-decoration: none;
			color: white;
			display: block;
			background-color: #ccc;
			width: 50px;
			height: 60px;
			text-align: center;
			display: none;
		}
		.right{
			right: 0px;
		}
	</style>
</head>
<body>
	<div class="banner">
		<a href="#" class="right">></a>
		<a href="#" class="left"><</a>
		<ul>
			<li><a href="#"><img src="images/p_5.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_1.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_2.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_3.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_4.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_5.jpg" height="220" width="587" alt=""></a></li>
			<li><a href="#"><img src="images/p_1.jpg" height="220" width="587" alt=""></a></li>
		</ul>
		
	</div>
</body>
</html>
<script>

	//获取banner
	var banner = document.querySelector('.banner');
	//获取宽度
	var bannerWidth = banner.offsetWidth;
	//获取Ul
	var moveUl = document.querySelector('ul');
	//获取li
	var lis = document.querySelectorAll('li');
	//循环遍历li 为li绑定index
	for (var i = 0; i < lis.length; i++) {
		lis[i].index = i;
	};
	var index = 1;
	var setTime = setInterval(function (){
		index++;
		moveUl.style.transition = 'all .5s';
		
		moveUl.style.transform = 'translateX('+index*bannerWidth*-1+'px)';
	},1000)
	moveUl.addEventListener('webkitTransitionEnd', function (){
		if(index == 6){
			index = 1;
			moveUl.style.transition = 'none';
			moveUl.style.transform = 'translateX('+index*bannerWidth*-1+'px)';
		}
	})

	//鼠标移入停止轮播
	banner.onmouseenter = function (){
		//清空计时器
		clearInterval(setTime);
	}
	banner.onmouseleave = function (){
		setTime = setInterval(function (){
			index++;
			moveUl.style.transition = 'all .5s';	
			moveUl.style.transform = 'translateX('+index*bannerWidth*-1+'px)';
		},1000)
	}
</script>


附 效果图