轮播图实现思路:

轮播图通过动画,关键帧,控制图片水平向左移动实现轮播,
主要通过让图片移动,首先把图片放置到一个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>