+【CSS3】使用纯css代码实现图片轮播效果



使用纯CSS3代码实现简单的图片轮播。

基本思路：

以5张图片为例：

1.基本布局：

将5张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。

2.设置动画：

然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。

5张图片，需要切换4次，定义动画0%，20%，40%，80%，100%。

3.动画分解：

为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。

即20%~40%里面包含切换到第二张图片并且将第二张图片静置。

另外，根据需要可以对各个图片添加相应的序号和图片简介。

4.其他事件：

如果需要点击事件的话，配合js完成其他特效（如：点击序号显示相应的图片、上一张下一张等）

5.效果图：

如下：

6.全部代码：

 
  
  
  
  
	
	
	
  
 
 
 

		
		
		
		
		
		

			  
			  
			  
			  
			  
			  

				
中国标志性建筑：天安门
				
中国标志性建筑：东方明珠
				
中国标志性建筑：布达拉宫
				
中国标志性建筑：长城
				
中国标志性建筑：天坛