| 简单的图片轮播效果，导航栏二级菜单内容被覆盖的解决方法 | 您所在的位置：网站首页 › 网页制作导航栏制作二级菜单是什么 › 简单的图片轮播效果，导航栏二级菜单内容被覆盖的解决方法 |
简单的图片轮播效果，导航栏二级菜单内容被覆盖的解决方法
|
一、图片轮播效果的实现 css的内容如下： #tab { top: 65px; overflow:hidden; width:100%; height:700px; position:relative; float:left; } #tab>img:not(:first-child){ display:none; }js的内容如下： window.onload = function(){ var images = document.getElementsByTagName('img'); var pos = 0; var len = images.length; setInterval(function(){ images[pos].style.display = 'none'; pos = ++pos == len ? 0 : pos; images[pos].style.display = 'inline'; },3000); };补充：
body的内容如下： 
运行结果如下：
二、如何解决导航栏二级菜单栏被图片覆盖的问题 1.设置css属性：z-index（可用于将一个元素放在另一个元素之后） （1）auto：默认，堆叠顺序和父元素相等 （2）number：设置元素的堆叠顺序 （3）inherit：规定从父元素继承z-index属性的值 补充：可将z-index设置为-1，将图片的设置在二级菜单栏下面 img{ position: absolute; z-index: -1; }补充：z-index只能在position属性值为relative、absolute、fixed的元素上有效果。
|
【本文地址】
公司简介
联系我们