<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
text-decoration: none;
}
#rongqi{
width: 600px;
height: 400px;
border:3px solid #333;
overflow: hidden;
position: relative;
left: 400px;
top:100px;
z-index: 1;
}
#list{
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
left: -600px;
}
#list img{
float: left;
width: 600px;
height: 400px;
}
#button{
position: absolute;
left: 650px;
top:450px;
z-index: 2;
width: 100px;
height: 10px;
}
#button span{
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#button .on{
background: orange;
}
.jt{
cursor: pointer;
/*display: none;*/
line-height: 39px;
text-align: center;
font-size: 36px;
color: #fff;
font-weight: bold;
width: 40px;
height: 40px;
z-index: 2;
background: black;
position: absolute;
top:280px;
}
.jt:hover{
background-color: rgba(0,0,0,.6);
}
/*#rongqi:hover .jt{
display: block;
}
*/
#left{
left: 440px;
}
#right{
left: 930px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var rongqi=document.getElementById('rongqi');
var left=document.getElementById('left');
var right=document.getElementById('right');
var button=document.getElementById('button').getElementsByTagName('span');
var list=document.getElementById('list');
function an (offset){
list.style.left=parseInt(list.style.left)+offset +'px';
}
left.onclick =function(){ an(-600); }
right.onclick =function(){ an(600); }
// left.onclick=function(){change(600);}
// right.onclick=change(-600);
// function change(target){
// list.style.left=parseInt(list.style.left)- 600 +'px';
// }
}
</script>
</head>
<body>
<div id="rongqi">
<div id="list" >
<img src="5.jpg"/>
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<img src="1.jpg"/>
</div>
</div>
<div id="button">
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<div id="d">
<a href="javascript:" id="left" ><</a>
<a href="javascript:" id="right">></a>
</div>
</body>
</html>