为什么切换不了图片呢？

源自：3-1 箭头切换

为什么切换不了图片呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

margin: 0px;

padding: 0px;

text-decoration: none;

}

body{

padding: 20px;

}

#cntainer{

height: 400px;

width: 600px;

border: 3px solid#333;

overflow: hidden;

position: relative;

}

#list{

height: 400px;

width: 4200px;

z-index: 1;

position: absolute;

background-color: #0C9;

}

#list img{

float: left;

}

#buttons{

position: absolute;

height: 10px;

width: 100px;

bottom: 20px;

left: 250px;

background-color: #999;

z-index: 2;

}

#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: block;

line-height: 39px;

text-align: center;

font-size: 36px;

font-weight: bold;

width: 40px;

height: 40px;

position: absolute;

z-index: 2;

top: 180px;

background: rgba(0,0,0,.3);

color: #FFF;

}

.arrow:hover{ background-color: rgba(0,0,0,.7);}

#container:hover.arrow{ display:block}

#prev{

left: 20px;

}

#next{right:20px}

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 animate (offset){

list.style.left=parseint(list.style.left)+offset+'px';}

next.onclick=function(){

animate (-600);

}

prev.onclick=function(){

animate (600);

}

</script>

</style>

</head>

<body>

</div>

</div>

</body>

</html>

提问者：夏冬春雪 2016-01-04 19:08

个回答

ppo_YXWU

2016-01-05 09:26:29

已采纳

你把js放到style标签里面了，要放出来；
list.style.left=parseint(list.style.left)+offset+'px';}这里应该是parseInt，I要大写。
<div id="list" style="left:-600">这里left少了单位，应该是-600px

0
夏冬春雪

2016-01-05 16:10:18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
text-decoration: none;
}
body{
padding: 20px;
}
#cntainer{
height: 400px;
width: 600px;
border: 3px solid#333;
overflow: hidden;
position: relative;
}
#list{
height: 400px;
width: 4200px;
z-index: 1;
position: absolute;
background-color: #0C9;
}
#list img{
float: left;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
bottom: 20px;
left: 250px;
background-color: #999;
z-index: 2;
}
#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: block;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background: rgba(0,0,0,.3);
color: #FFF;
}
.arrow:hover{ background-color: rgba(0,0,0,.7);}
#container:hover.arrow{
display: none
}
#prev{
left: 20px;
}
#next{right:20px}
</style>
<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 prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate (offset){
list.style.left=parseInt(list.style.left)+offset+'px';}
next.onclick=function(){
animate (-600);
}
prev.onclick=function(){
animate (600);
}
}

</script>

</head>

<body>
<div id="cntainer">
<div id="list" style="left:-600px">
<img src="图片/山下/山下-5.jpg" alt="1">
<img src="图片/山下/山下-1.jpg" alt="1">
<img src="图片/山下/山下-2.jpg" alt="2">
<img src="图片/山下/山下-3.jpg" alt="3">
<img src="图片/山下/山下-4.jpg" alt="4">
<img src="图片/山下/山下-5.jpg" alt="5">
<img src="图片/山下/山下-1.jpg" alt="5">
<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>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>

</body>
</html>
还是不行!

0