1.图片轮播（使用动画，根据图片不同时间的移动值来实现，图片排放在一个容器中，图片大小要与容器大小一致）
#photo>img{ float:left; width:330px; height:470px; } #photo{ width:1650px; animation:switch 7s ease-out infinite; } <div id="container"> <div id="photo"> <img src="images/dushu2.jpg"> <img src="images/dushu3.jpg"> <img src="images/book (4).jpg"> <img src="images/book (5).jpg"> <img src="images/dushu (6).jpg"> </div> </div>
上述每个图片宽度为330px；
img第一外层的photo为图片容器，即在此盒子中放了5张图片；图片中有添加 float的效果，这样就不用考虑去边距问题。
#container{ width:990px; height:450px; overflow: hidden; }
img第二外层的container为所展示图片的容器，上述所展示为3张，剩余两张图片溢出使用overflow:hidden来将其隐藏起来
#photo{ width:1650px; animation:switch 7s ease-out infinite; } @keyframes switch{ 0%,25%{margin-left: 0;} 35%,65%{margin-left:-330px;} 75%,100%{margin-left: -660px;} }
上述为使所展示的容器中均有3张图片，一共5张图片，第一阶段展现出来的即为前三张；第二阶段第一张图片左一一个宽度展现出来的为第2，3，4张图片；第三阶段移动2个图片的宽度展现出来后3张图片。
该动画一个周期为7s,且以慢速 无限循环；
35%~65%为图片停留阶段，和第一阶段空出来的时间为动画切换的部分；
2.图片渐变轮播（实现前面图片消失时后一个隐隐出现的效果）
<div id="RotationPicture"> <div id="screen"> <a href="#"target="_blank"><img src="images/QQ图片.jpg" width=100%；height=100%;></a> <a href="#"target="_blank"><img src="images/two.jpg" width=100%；height=100%;></a> <a href="#"target="_blank"><img src="images/four.png" width=100%；height=100%;></a> <a href="#"target="_blank"><img src="images/three.png" width=100%；height=100%;></a> </div> </div>
先创建轮播图片的div,id为RotationPicture，在创建一个放入图片的div，id为screen,其中放了4张图片链接。
将图片设为宽度和高度都设置成100%，可以使整个图片显示出来；自由缩放图片且图片放大的尺寸不大于其原始值可以将其设置为max-weight:100%;height:auto;;背景图片可以使其为background-size:100%;使整个背景图片完全放入div中。
#RotationPicture{ height:50px; } #screen a{ position:absolute; animation: donghua 12s Infinite; } @keyframes donghua{ 0%{opacity: 0;} 3%{opacity:1;} 25%{opacity: 1;} 28%{opacity: 0;} } #screen a:nth-child(1){animation-delay:0s} #screen a:nth-child(2){animation-delay:3s} #screen a:nth-child(3){animation-delay:6s} #screen a:nth-child(4){animation-delay:9s}
先要设置容器的大小位置；动画周期为12s,无限循环；animation-delay为动画延迟时间，即第二张图片于整个阶段第3s开始播放，第3张图片于第6s开始播放；0%-3%中有3%的过渡时间（12s的3%），从刚刚开始的完全透明逐渐过渡到完全不透明，25%-28%再由完全不透明逐渐过渡到完全透明，实现前一张图片消失，同时后一张图片出现的效果。
