<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul{
list-style: none;
}
body{
margin: 0;padding: 0;
}
#box{
margin: 100px auto;
position:relative;
}
li{
position: absolute;
opacity: 0;
transition: 1s;
}
li:first-child{
opacity: 1;
}
</style>
<script>
var li=document.getElementsByTagName("li");
var index=0;
function aa(){
index++;
if(index==li.length){
index=0;
}
for (var i=0;i<li.length;i++) {
li[i].style.opacity=0;
}
li[index].style.opacity=1;
}
setInterval("aa()",3000);
</script>
<body>
<div id="box">
<ul>
<li><img src="../day02/img/rr_03.gif"></li>
<li><img src="../day02/img/rr_06.jpg"></li>
<li><img src="../day02/img/rr_08.gif"></li>
<li><img src="../day02/img/rr_10.gif"></li>
</ul>
</div>
</body>
</html>