添加了動(dòng)畫函數(shù)后反而圖片無法切換了
<!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>
*{ text-decoration:none;}
#conter{width:600px; height:400px; border:3px solid #930; position:relative; overflow:hidden;}
#list{width:4200px; height:400px; position:absolute; z-index:1;}
#list img{ float:left;}
.arrow{position:absolute; z-index:2;width:40px; height:40px; background-color:rgba(0,0,0,.3); font-size:36px; font-weight:bold; color: #FFF; top:180px; display:none; line-height:39px; text-align:center;}
#conter:hover .arrow{display:block;}
.arrow:hover{ ?background-color:rgba(0,0,0,.7);}
#buttons{position:absolute; z-index:2; width:100px; height:10px; bottom:20px; left:250px;}
#buttons span{ cursor:pointer; width:10px; height:10px; background-color:#999; border:1px solid #FFF; ?border-radius:50%; float:left; margin-left:5px; }
#buttons .on{ background:#F00;}
#prev{left:20px;}
#next{right:20px;}
</style>
<script type="text/javascript">
window.onload=function(){
rec();
}
? function rec(){
?var conter=document.getElementById("conter");
?var list=document.getElementById("list");
?var buttons=document.getElementById("buttons").getElementsByTagName("span");
?var prev=document.getElementById("prev");
?var next=document.getElementById("next");
?var index=1;
?function showbutton(){
?for(var i=0;i<buttons.length;i++){
?if(buttons[i].className=='on'){
?buttons[i].className='';
?}
?
?}
buttons[index-1].className='on';
?
}
?function a(offset){
?
?var newleft=parseInt(list.style.left)-offset;
var time=300;
var intervar=10;
var speed=offset/(time/interval);
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}else{
list.style.left=newleft+'px';
? ? ? ? ? ? ? ?if(newleft>-600)
{
? ? ? ? ? ?list.style.left=-3000+'px'; ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?if(newleft<-3000)
{
? ? ? ? ? ? ? ? list.style.left=-600+'px';
? ? ? ? ? ? ? ? }
? ? }
}
?
?
? go();
}
?next.onclick=function (){
?if(index==5){
?index=1;
?}else{
index+=1;
}
?showbutton();
?a(-600);
?}
prev.onclick=function(){
?if(index==1){
index=5; ?
}else{
index-=1;
}
showbutton();
a(600);
}
?
for(var i=0; i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=='on'){
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=-600*(myIndex-index);
a(offset);
index=myIndex;
showbutton();
}
}
}
??
</script>
</head>
<body>
<div id="conter">
<div id="list" style="left:-600px;"/>
<img src="../images/5.jpg"/>
<img src="../images/1.jpg"/>
<img src="../images/2.jpg"/>
<img src="../images/3.jpg"/>
<img src="../images/4.jpg"/>
<img src="../images/5.jpg"/>
<img src="../images/1.jpg"/>
</div>
<div id="buttons">
<span class="on" index='1'></span>
<span index='2'></span>
<span index='3'></span>
<span index='4'></span>
<span index='5'></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
2016-09-04
?var newleft=parseInt(list.style.left)-offset;你是減了
2016-07-06
你應(yīng)該沒按照 老師說的來吧