简单的图片轮播效果，导航栏二级菜单内容被覆盖的解决方法

一、图片轮播效果的实现

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的内容如下：

<div id="tab">
   <img src="img/1.jpg" width="100%" height="100%"/>
   <img src="img/2.jpg" width="100%" height="100%"/>
   <img src="img/3.jpg" width="100%" height="100%"/>
   <img src="img/4.jpg" width="100%" height="100%"/>
</div>

运行结果如下：

二、如何解决导航栏二级菜单栏被图片覆盖的问题

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的元素上有效果。