<html>
<head>
<title>picture repeat</title>
<style type="text/css">
#container{
margin:0 auto;
width: 786px;/*轮播图片的宽度*/
height: 543px;/*轮播图片的高度*/
position: relative;
overflow: hidden;
z-index: 0;
}
#list{
position: absolute;
width: 4716px;
height: 543px;
z-index: 1;
left: -786px;
}
#list img{
float: left;
}
#left{
position: absolute;
left: 20px;
top: 270px;
display: none;
z-index : 2;
padding:8 15 8 15;
background-color: rgba(0,0,0,.3);
color: white;
}
#right{
position: absolute;
right: 20px;
top: 270px;
display: none;
z-index : 2;
padding:8 15 8 15;
background-color: rgba(0,0,0,.3);
color: white;
}
#container:hover .arrow{
display: block;
}
#left:hover{
background-color: rgba(0,0,0,.7);
}
#right:hover{
background-color: rgba(0,0,0,.7);
}
.arrow{
text-decoration: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
var left = document.getElementById("left");
var right = document.getElementById("right");
var list = document.getElementById("list");
list.style.left = "-786px";
left.onclick = function(){
var newLeft = parseInt(list.style.left) - 786;
if(newLeft < -3144){
$("#list").animate({left: newLeft + "px"},function(){
list.style.left = "-786px";
});
}
else{
//list.style.left = newLeft + "px";
$("#list").animate({left: newLeft + "px"});
}
};
right.onclick = function(){
var newLeft = parseInt(list.style.left) + 786;
if(newLeft > -786){
$("#list").animate({left: newLeft + "px"},function(){
list.style.left = "-3144px";
});
}
else{
//list.style.left = newLeft + "px";
$("#list").animate({left: newLeft + "px"});
}
};
};
</script>
</head>
<body>
<div id="container">
<div id="list">
<img src="4.png">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="1.png">
</div>
<a id="left" href="#" class="arrow"><<</a>
<a id="right" href="#" class="arrow">>></a>
</div>
</body>
