好的,如果您的示例链接正确表明您想要什么...关键问题是您将使用什么方法来旋转横幅?当然是javascript(如果你想要跨浏览器兼容性)但是......什么方法?您提供的链接中的那个人正在使用一个里面<ul>
有几个<li>
' 的元素,每个元素都有不同的背景之一......
使用transitions
(高级 css3 效果),absolute positioning
并且left
,他基本上水平滚动它们,改变值left
在任何情况下,您都需要类似的东西:
.wrapper {display:block; position:relative;}
.logo-div {position:absolute; top:0; left:0; z-index:9999;}
.logo {}
.nav {}
.rotator {position:absolute; top:0; left:0; z-index:1;}
和 html 应该是这样的:
<div class="wrapper">
<div class="rotator">
insert your magic slides of different content or backgrounds here, be in in ul+li format or just divs or whichever method you prefer
</div><!-- .rotator -->
<div class="logo-div">
<div class="logo">
<img src="image/logo.jpg">
</div>
<div class="nav">
<ul>
<li>nav-button</li>
</ul>
</div><!-- .nav -->
</div><!--logo div -->
</div><!-- .wrapper -->
这里真正的问题是,您将使用什么方法来循环内容?您可以复制他的方法,或者如果您想要更改的只是背景而不是任何内容,则只需更改背景位置。
.wrapper 或父元素需要 position:relative; 该包装器的内容,在本例中为 .logo-div 和 .rotator 需要 position:relative 位于导航栏和徽标后面的 .rotator div 以及所有需要 z-index:1 的内容;加上顶部:0;并离开:0;例如 .rotator div 上方的 .logo-div 需要 z-index:2 或 9999;加上顶部:0;并离开:0;举个例子
所以现在一切都停留在应有的位置,并且 .rotator 的内容可以移动而不会弄乱页面的其余部分。
选择一种循环/移动背景内容/图像的方法,我会给你一个更具体的答案。
希望这可以帮助