与HTML5/CSS3图像堆栈

Question

我知道有很多例子，但本质上没有通常参与，一个人如何可以使用新的HTML5 + CSS3风格做一个图像堆栈中的任何垃圾，那就是：

• 唯一的单张影像显示当时的一些事件（例如鼠标按下;循环）后显示在前面的图像
• 下一个图像

我想知道如何使用新HTML5/CSS3风格做这个简单的事？

Answer 1

我发现一个幻灯片的很好的例子，如果这就是你正在寻找的东西，没有太多的额外内容。一个显示下一张照片的计时器和另一个更改背景的计时器。

两个CSS3的解决方案和每步好的一步的教程

Timed slideshow (box)
Timed slideshow (background)

我希望我没有误解你的问题。

Answer 2

个人而言，我会使用jQuery周期 - http://jquery.malsup.com/cycle/

<div id="shuffle" class="pics">  
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />  
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />  
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />  
</div> 

$('#shuffle').cycle({ 
    fx:  'fade', 
    delay: -4000 
}); 

我不知道有一个HTML5/CSS3方法，这是诚实的。它只是常规的CSS，因为你所做的只是将容器设置为图像尺寸，然后将每个图像设置为绝对定位，以便将它们“堆叠”在一起。然后循环遍历所有动画。

你可以使用CSS3转换，但你在你的问题中提到了jQuery，所以Cycle是你最好的选择。

Answer 3

这是最好的，我曾经发现

.stack { position: relative; z-index: 10; } 
.stack img { max-width: 180px; height: 180px; vertical-align: bottom; border: 5px solid #fff; border-radius: 3px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 
    }