如何为nav> ul标签制作背景幻灯片？

Question

我想每隔几秒更改图像背景。 banner1 banner2 ... 我的CSS代码：

nav>ul{ 
    width: 529px; 
    height: 529px; 
    background: url(../images/banner1.png) center no-repeat; 
    position: absolute; 
    top: 50%; 
    margin: -216px -260px; 
    left: 50%; 
    z-index: 50; 
} 

的html代码：

<nav> 
<ul> 
anything 
</ul> 
</nav> 

Answer 1

您可以使用此jQuery插件，使背景的幻灯片。它将伸展任何图像以适应容器元素。

你只需要包括插件，写类似下面的脚本：

<script> 
$(".container-element-class").backstretch([ 
     "path-to-your/image1.jpg" 
    , "path-to-your/image2.jpg" 
    , "path-to-your/image3.jpg" 
    ], {duration: 3000, fade: 750}); 
</script> 

http://srobbin.com/jquery-plugins/backstretch/