css 实现图片轮播

轮播图实现思路:

轮播图通过动画,关键帧,控制图片水平向左移动实现轮播,
主要通过让图片移动,首先把图片放置到一个div里,设置浮动,英文图片宽为600,通过动画关键帧,让它每次向左水平移动600,然后div设置超出隐藏,最终实现轮播效果

div中超出隐藏之前的效果

最终效果

代码

html

	<div class="c1">
		<div class="tp">
			<img src="./1.png">
			<img src="./2.png">
			<img src="./3.png">
			<img src="./4.png">
		</div>
	</div>

css

	<style type="text/css">
		@keyframes dong {
			0% {transform: translateX(0px);}
			33% {transform: translateX(-600px);}
			66% {transform: translateX(-1200px);}
			100% {transform: translateX(-1800px);}
		}
		.c1 {
			width: 600px;
			height: 400px;
			border:1px solid red;
			overflow: hidden;
			margin: 0 auto;
		}
		div.tp {
			animation: dong 10s ease 2s infinite normal;
			width: 2400px;
			transform:translateX(0px);
		}
		div.tp img {
			float: left;
		}
	</style>