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

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

　　用的是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="data:images/p_5.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_1.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_2.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_3.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_4.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data:images/p_5.jpg" height="220" width="587" alt=""></a></li>

			<li><a href="#"><img src="data: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>

附 效果图

巴特西

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

最新文章

热门文章