<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0px;
margin: 0px;
list-style: none;
}
.side{
margin: 50px auto;
600px;
height: 800px;
overflow: hidden;
margin: 20px auto;
box-shadow: 2px 2px 10px #c38dd4;
border-radius:20px;
position: relative;
}
</style>
</head>
<body>
<div class="side" id = "lunbo">
<ul">
<li><img src="img/view.jpg" width="600px"height="800px"/></li>
<li><img src="img/98bOOOPICc4_1024.jpg" width="600px"height="800px" /></li>
<li></a><img src="img/09bOOOPICdb_1024.jpg" width="600px"height="800px" /></li>
<li></a><img src="img/21bOOOPICe7_1024.jpg" width="600px"height="800px" /></li>
<li></a><img src="img/02bOOOPIC22_1024.jpg" width="600px"height="800px"/></li>
<li></a><img src="img/12bOOOPIC77_1024.jpg" width="600px"height="800px"/></li>
<li></a><img src="img/11bOOOPIC8c_1024.jpg" width="600px"height="800px"/></li>
<li></a><img src="img/u=2821732184,1190237967&fm=27&gp=0.jpg" width="600px"height="800px" /></li>
</ul>
</div>
<script>
var li=document.getElementById('lunbo').getElementsByTagName("li");
var num=0;
var len=li.length;
setInterval(function(){
li[num].style.display="none";
num=++num==len?0:num;
li[num].style.display="inline-block";
},3000);//切换时间
</script>
</body>
</html>