為什么切換不了圖片呢？
<!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>無標(biāo)題文檔</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:block}
#prev{
left: 20px;
}
#next{right:20px}
<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>
</style>
</head>
<body>
<div id="cntainer">
? <div id="list" style="left:-600">
? <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>
2016-01-05
你把js放到style標(biāo)簽里面了，要放出來；
list.style.left=parseint(list.style.left)+offset+'px';}這里應(yīng)該是parseInt，I要大寫。
? <div id="list" style="left:-600">這里left少了單位，應(yīng)該是-600px
2016-01-05
<!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>無標(biāo)題文檔</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>
還是不行!