點(diǎn)擊左右箭頭到第7張圖片出現(xiàn)空白？left值無限的增加減少。我的width:770
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
padding: 20px;
}
#container{
width: 770px;
height: 365px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list{
width: 3850px;
height: 365px;
position: absolute;
z-index: 1;
}
#list img{
float: left;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 350px;
}
#buttons span{
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 8px;?
}
#buttons .on{
background: orangered;
}
.arrow{
cursor: pointer;
display: none;
line-height: 70px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
width: 30px;
height: 75px;
position: absolute;
z-index: 2;
top: 180px;
background: #A5A3A1;
margin-top: -25px;
opacity: .6;
}
.arrow:hover{
background-color: #7F7E7E;
opacity: .3;
}
#container:hover .arrow{
display: block;
}
#prev{
left: 2px;
}
#next{
right: 2px;
}
</style>
</head>
<body>
<div id="container">
????<div id="list" style="left: -770px;">
????????<img src="images/5.jpg" alt=""/>
????????<img src="images/1.jpg" alt=""/>
????????<img src="images/2.jpg" alt=""/>
????????<img src="images/3.jpg" alt=""/>
????????<img src="images/4.png" alt=""/>
????????<img src="images/5.jpg" alt=""/>
????????<img src="images/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:;" id="prev"><</a>
????<a href="javascript:;" id="next">></a>
</div>
<script>
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');
function ainimet(offtset){
list.style.left = parseInt(list.style.left) + offtset + 'px';
}
next.onclick = function () {
ainimet(-770);
}
prev.onclick = function () {
ainimet(770);
}
}
</script>
</body>
</html>
直接拿sublime運(yùn)行
2016-12-27
弄好了，謝謝。原來是沒寫完的！
2016-12-24
你連代碼都不貼的嗎╮(╯▽╰)╭