<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8"?/>
????<title></title>
<style?type="text/css">
*{padding:0;margin:?0;}
body{padding:?50px;}
#container{width:600px;height:400px;border:?3px?solid?#333;position:relative;overflow:hidden;}
#list{width:4200px;height:?400px;position:absolute;}
#list?img{float:?left;width:600px;height:400px;}
#buttons{width:100px;height:10px;position:absolute;bottom:20px;left:250px;}
#buttons?span{float:left;width:10px;height:10px;border:?1px?solid?#fff;border-radius:50%;background:#333;margin-right:?5px;cursor:pointer;}
#buttons?.on{background:#f60;}
.arrow{z-index:99;position:absolute;top:180px;width:40px;height:?40px;font-size:36px;font-weight:bold;text-align:center;color:#fff;background-color:?rgba(0,0,0,0.3);cursor:?pointer;display:?none;}
#container:hover?.arrow{display:block;}
.arrow:hover{background-color:?rgba(0,0,0,0.7);}
#prev{left:20px;}
#next{right:20px;}
</style>
</head>
<body>
??<div?id='container'>
????<div?id='list'?style='left:-600px;'>
??????<img?src="image/5.jpg">
??????<img?src="image/1.jpg">
??????<img?src="image/2.jpg">
??????<img?src="image/3.jpg">
??????<img?src="image/4.jpg">
??????<img?src="image/5.jpg">
??????<img?src="image/1.jpg">
????</div>
????<div?id='buttons'>
??????<span?index='1'?class='on'></span>
??????<span?index='1'></span>
??????<span?index='1'></span>
??????<span?index='1'></span>
??????<span?index='1'></span>
????</div>
????<div?id='prev'?class='arrow'><</div>
????<div?id='next'?class='arrow'>></div>
??</div>
<!--?<script?type="text/javascript"?src='jquery-3.1.1.min.js'></script>?-->
<script?type="text/javascript">
var?container=document.getElementById('container');
var?list=document.getElementById('list');
var?buttons=document.getElementById('list').getElementsByTagName('span');
var?prev=document.getElementById('prev');
var?next=document.getElementById('next');
function?animate(offset){
??var?newLeft=parseInt(list.style.left)+offset;
??list.style.left=newLeft+'px';
??if(newLeft>-600){
????list.style.left=-3000+'px';
??}else?if(newLeft<-3000){
????list.style.left=-600+'px';
??}
}
prev.onclick=function(){
??animate(600);
}
next.onclick=function(){
??animate(-600);
}
</script>
</body>
</html>
