来一筐代码，看看程序员的酸楚

首先看看下面的这个视频

那么，下面我们来看看它的结构和样式

结构代码

我们有了结构代码，那么下面看看它的样式代码

.container{

background:red;

width:100%;

}

.container nav{

width:100%;

}

.left{

float:left;

}

.left a,.right a{

text-decoration:none;

color:#ddd;

width:100px;

margin-left:10px;

}

.right{

float:right;

}

.left a:hover,.right a:hover{

background:blue;

}

.creat{

clear:both;

}

.wlb{

width:100%;

height: 400px;

position:relative;

}

.alb{

width:100%;

position:relative;

}

.alb div{

width:100%;

position:absolute;

opacity:0;

}

.fonty{

color:white;

position:absolute;

font-size:50px;

left:40%;

top: 120px;

background: rgba(65,110,45,0.3);

}

.fonty .fright{

padding-left: 100px;

}

.wlb

.show{

opacity:1 !important;

}

.show img{

width:100%;

height:400px;

}

上面的结构和样式代码都完成了，那么我们进行行为代码

window.onload=function(){

function task(){

var img=document.querySelector("div.show")

img.className=""

if(img.nextElementSibling!==null){

img.nextElementSibling.className="show"

}else{

img.parentNode.children[0].className="show"

}

}

setInterval(task,10000)

}

通过上面这些代码，就可以实现如视频所示的例子！