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

Posted 2020-08-17 奋斗的小小牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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>


附 效果图

以上是关于C3属性的轮播图（持续更新）的主要内容，如果未能解决你的问题，请参考以下文章

JS 轮播图（无缝连接的轮播图实现，含代码供参考）