到底哪里錯(cuò)了，總是輪播不了。
<!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;}
#boss{ width:700px; height:400px; position:relative; left:300px; border:3px solid #CF3; overflow:hidden;}
#tupian{ width:4200px; height:400px; position:absolute; z-index:2;}
#tupian img{ float:left;}
#anniu{ cursor:pointer; width:100px; height:10px; z-index: 2; bottom: 20px; left: 350px; margin-left:-50px; position:absolute; }
#anniu span { cursor: pointer; float: left; border: 1px solid #fff; width: 15px; height: 15px; border-radius: 50%; background: #333; margin-right: 5px;}
#anniu .on{ background:rgba(153,102,204,.5)}
.daanniu{ cursor: pointer; display: none; line-height: 60px; text-align: center; font-size: 60px; font-weight: bold; width: 60px; height: 60px; ?position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.daanniu:hover { background-color: RGBA(0,0,0,.7);}
#boss:hover .daanniu{ display: block;}
#zuo{left:20px}
#you{right:20px;}
</style>
<script type="text/javascript">
? window.onload = function () {
? ? ? ? ? ? var boss = document.getElementById('boss');
? ? ? ? ? ? var tupian = document.getElementById('tupian');
? ? ? ? ? ? var anniu = document.getElementById('anniu').getElementsByTagName('span');
? ? ? ? ? ? var zuo = document.getElementById('zuo');
? ? ? ? ? ? var you = document.getElementById('you');
var index=1;
var donghua=false;
var zidong;
function yuandian(){
for(var q=0;q<=anniu.length;q++){
if(anniu[q].className=='on'){
anniu[q].className='';
break;
};
}
anniu[index-1].className='on';
}
function hanshu(haha){
var newleft=parseInt(tupian.style.left)+ haha;
var time=300; //總時(shí)間
var weiyi=10; //位移時(shí)間
var weiyiliang=haha/(time/weiyi);//每次位移多少
donghua=true;
function go(){
//weiyiliang<0向左移動(dòng)，且當(dāng)前l(fā)eft值大于目標(biāo)left值時(shí)
if(weiyiliang<0&&parseInt(tupian.style.left)>newleft||weiyiliang>0&&parseInt(tupian.style.left)<newleft){
tupian.style.left=parseInt(tupian.style.left)+ weiyiliang+'px';
setTimeout( go , weiyi );
}
else{
donghua=false;
tupian.style.left= newleft + 'px';
if(newleft>-700){
tupian.style.left=-2800+'px';
}
if(newleft<-2800){
tupian.style.left=-700+'px';
}
}
}
go();
}
function play(){
zidong = setInterval(function(){
you.onclick();},3000)
}
function stop(){
clearInterval(zidong);
}
you.onclick = function(){
if(index==4){
index=1;
}
else{
index+=1;
}
yuandian();
if(!donghua){
hanshu(700);
}
}
zuo.onclick = function(){
if(index==1){
index=4;
}
else{
index-=1;
}
yuandian();
if(!donghua){
hanshu(-700);
}
}
for(var w=0;w<=anniu.length;w++){
if(this.className=='on'){
return;
}
anniu[w].onclick=function(){
var indexzhi=parseInt(this.getAttribute('index'));
var jieguo=-700*(indexzhi-index);
if(!donghua){
hanshu(jieguo);
}
index=indexzhi;
yuandian();
}
}
boss.onmouseover=stop;
boss.onmouseout=play;
play();
? }
</script>
</head>
<body>
<div id="boss">
<div id="tupian" style="left:-700px;">
? ?<img src="網(wǎng)頁(yè)練習(xí)/img/9.jpg" / >
? ? <img src="網(wǎng)頁(yè)練習(xí)/img/6.jpg" / >
? ? ? ? <img src="網(wǎng)頁(yè)練習(xí)/img/7.jpg" / >
? ? ? ? <img src="網(wǎng)頁(yè)練習(xí)/img/8.jpg" / >
? ? ? ? <img src="網(wǎng)頁(yè)練習(xí)/img/9.jpg" / >
? ? ? ? <img src="網(wǎng)頁(yè)練習(xí)/img/6.jpg" / >
? ? </div>
? ? <div id="anniu">?
? ? <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="daanniu" ><</a>
<a href="javascript:;" id="you" class="daanniu">></a>
</div>
</body>
</html>
2016-04-28
for(var q=0;q<=anniu.length;q++)
for(var w=0;w<=anniu.length;w++)
for循環(huán)為啥要多那個(gè)等于，去掉就好了