标签：offset 图片 == red [] osi onclick push div
向左轮播可以，再向右的话就需要重新定义距离了，不知道除了marginleft还有没有其他表示距离的代码 ，再试试！
<style>
* {
margin: 0px;
padding: 0px;
}
.kuang{
margin: 150px;
width: 620px;
height: 380px;
/*border: 5px solid black;*/
position: relative;
}
.p{
width: 620px;
height: 380px;
background-color: red;
float: left;
color: white;
font-size: 100px;
text-align: center;
line-height: 380px;
}
.da{
width: 2480px;
height: 380px;
}
.left,.right {
width: 20px;
height: 380px;
font-size: 30px;
line-height: 380px;
text-align: center;
background-color: black;
color: white;
opacity: 0.5;
position: absolute;
top: 0px;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.left:hover,.right:hover {
cursor: pointer;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="kuang">
<div class="left"><</div>
<div class="right">></div>
<div class="da">
<div class="p" style="background-color: blueviolet;"></div>
<div class="p" style="background-color: darkturquoise;"></div>
<div class="p" style="background-color: yellow;"></div>
<div class="p" style="background-color: green;"></div>
</div>
</div>
</body>
</html>
<script>
left=document.getElementsByClassName("left")[0];
right=document.getElementsByClassName("right")[0];
da=document.getElementsByClassName("da")[0];
arr=[];
s=1;
left.onclick=function(){
arr.push(window.setInterval("moveleft()",5));
}
function moveleft(){
if(da.offsetLeft==-620*s){
clearall();
s++;
}else{
da.style.marginLeft=da.offsetLeft-20+"px";
}
}
function clearall(){
for(i in arr){
window.clearInterval(arr[i])
}
}
arr2=[];
a=1;
right.onclick=function(){
arr2.push(window.setInterval("moveright()",5));
}
function moveright(){
if(da.offsetLeft==620*a){
clearal();
a++;
}else{
da.style.marginLeft=da.offsetLeft+20+"px";
}
}
function clearaal(){
for(x in arr2){
window.clearInterval(arr2[x])
}
}
</script>
代码不是很完美，日后好了之后再发一遍把
标签：offset 图片 == red [] osi onclick push div
原文地址：http://www.cnblogs.com/m110/p/7617966.html
