图片轮播
Posted 她的睫毛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播相关的知识，希望对你有一定的参考价值。
向左轮播可以，再向右的话就需要重新定义距离了，不知道除了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>
代码不是很完美，日后好了之后再发一遍把
以上是关于图片轮播的主要内容，如果未能解决你的问题，请参考以下文章