该文件可能已被移至别处或遭到删除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;;
text-decoration: none;
}
body{
padding: 20px;
}
#container{
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list{
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
}
#list img{
float: left;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
#buttons span{
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius:50%;
background: #333;
margin-right: 5px;
}
#buttons .on{
background: orangered;
}
.arrow{
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: rgba(0,0,0,.3);
color: #fff;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);
}
#container:hover .arrow{
display: block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index =1;
function showButton(){
for(var i=0;i<buttons.length;i++){
if (buttons[i].className=='on') {
buttons[i].className='';
break;
}
}
buttons[index - 1].className ='on';
}
function animate(offset){
var newLeft =parseInt(list.style.left) +offset;
list.style.left = newLeft + 'px';
if(newLeft>-600){
list.style.left =-3000 +'px';
}
if(newLeft<-3000){
list.style.left =-600 +'px';
}
}
next.onclick = function () {
if(index==5){
index =1;
}else{
index +=1;
}
showButton();
animate(-600)
}
prev.onclick = function () {
if(index==1){
index =5;
}else{
index -=1;
}
showButton();
animate(600)
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px;">
<img src="pic/5.jpg" alt="">
<img src="pic/1.jpg" alt="">
<img src="pic/2.jpg" alt="">
<img src="pic/3.jpg" alt="">
<img src="pic/4.jpg" alt="">
<img src="pic/5.jpg" alt="">
<img src="pic/1.jpg" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript;" class="arrow" id="prev"><</a>
<a href="javascript;" class="arrow" id="next">></a>
</div>
</body>
</html>
