轮播图心得

已知一个图片宽度为820px则五个图片宽度为4100px且为了刚好在最后一个图片显示完所以应在从负的3280px也就是四个图片的宽度停止且播放时间为20s播放时间长短根据个人喜好所判断。

.photo01{
			width: 820px;//在外面先规定盒子的宽度
			height: 340px;//在外面先规定盒子的高度
			overflow: hidden;
		}
.photo02{
			width: 4100px;//五个图片的宽度//
			position: relative;
			animation:mymove 20s infinite;//运动时间//
			animation-timing-function:linear;
			-webkit-animation:mymove 20s infinite;
				-webkit-animation-timing-function:linear;
		}
		@keyframes mymove{
			from{left: -3280px;}//四个图片的宽度，为了刚好播放到最后一个图//
			to{left: 0px;}
```<div class="photo01">
 <div class="photo02">
	<img src="img/001.jpg" >
	<img src="img/002.jpg" >
	<img src="img/003.jpg" >
	<img src="img/004.jpg" >
	<img src="img/005.jpg" >
	</div>
 </div>