The code is simple, go directly to:
<!DOCTYPE html>
<html>
<head>
<title>轮播</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;
margin:0;
}
.mainCss{
width:100px;
height: 200px;
position: relative;
overflow: hidden;
}
ul {
width:300px;
height: 200px;
position: absolute;
}
ul li{
float: left;
width: 100px;
height: 200px;
list-style: none;
text-decoration: none;
}
</style>
</head>
<body>
<div class="mainCss" id="main">
<ul id="list">
<li style="background: red"></li>
<li style="background: blue"></li>
<li style="background: yellow"></li>
</ul>
</div>
<script type="text/javascript">
var list=document.getElementById('list');
var left=0;
//移动
var move=function(){
if(left===-200){
left=0;
}else{
left-=100;
}
list.style.left=left+'px'
}
setInterval(move,1000)
//document.addEventListener('click',move)
</script>
</body>
</html>