关于图片轮播为什么还是不能无限轮播。js写的没有错啊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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 zuo=document.getElementById('zuo');
var you=document.getElementById('you');
zuo.onclick=function(){
list.style.left=parseInt(list.style.left)+730+'px';
if (list.style.left>-730) {
list.style.left=-2920+'px';
}
}
you.onclick=function(){
list.style.left=parseInt(list.style.left)-730+'px';
if (list.style.left<-2920) {
list.style.left=-730+'px';
}
}
}
</script>
<style type="text/css">
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#container{
width: 730px;
height: 454px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list{
width: 4380px;
height: 454px;
position: absolute;
z-index: 1;
}
#list img{
float: left;
}
#buttons{
position: absolute;
height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 300px;
}
#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;}
#zuo { left: 20px;}
#you { right: 20px;}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:-730px;">
<img src="img/icon/banner4.jpg" alt="1"/>
<img src="img/icon/banner1.jpg" alt="1"/>
<img src="img/icon/banner2.jpg" alt="2"/>
<img src="img/icon/banner3.jpg" alt="3"/>
<img src="img/icon/banner4.jpg" alt="4"/>
<img src="img/icon/banner1.jpg" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" id="zuo" class="arrow"><</a>
<a href="javascript:;" id="you" class="arrow">></a>
</div>
</body>
</html>
qq_你好哦_05回答
-
大江ss
<span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span></div><a href="javascript:;" id="zuo" class="arrow"><</a><a href="javascript:;" id="you" class="arrow">></a></div></body></html> -
if_else_
你用像素Px来控制的话，你试一下，让它左右到最大值的时候，再次点击，回到最开始的值
随时随地看视频慕课网APP
相关分类
JavaScript