求解,有bug
window.onload?=?function(){ var?container?=?document.getElementById("container"), list?=?document.getElementById("list"), btn?=document.getElementById("btn").getElementsByTagName("span"), prev?=?document.getElementById("prev"), next?=?document.getElementById("next"), index?=?1, animated?=?false, timer; //圓點(diǎn)的函數(shù) function?showButton(){ //清除圓點(diǎn)屬性 for(var?i?=?0;?i?<?btn.length;?i++){ if(btn[i].className?==?'on'){ btn[i].className?=?''; break; } } btn[index?-?1].className?=?'on'; } //點(diǎn)擊圓點(diǎn)切換圖片 for(var?i?=?0;?i?<?btn.length;?i++){ btn[i].onclick?=?function(){ //條件成立,退出函數(shù),后面的將不執(zhí)行 if(this.className?==?'on'){ return; } //獲取當(dāng)前點(diǎn)擊的index值 var?myIndex?=?parseInt(this.getAttribute('index')); var?offset?=?-960?*?(myIndex?-?index); animate(offset); index?=?myIndex; if(!animated){ showButton(); } } } //封裝點(diǎn)擊箭頭切換圖片的函數(shù) function?animate(offset){ animated?=?true; var?newLeft?=?parseInt(list.style.left)?+?offset; var?time?=?300; //位移總時(shí)間 var?interval?=?5; //位移間隔時(shí)間 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{ animated?=?false; list.style.left?=?newLeft?+?"px"; //無(wú)限滾動(dòng) if(newLeft?>?-960){ list.style.left?=?-4800?+?"px"; } if(newLeft?<?-4800){ list.style.left?=?-960?+?"px"; } } } go(); } //自動(dòng)切換函數(shù) function?play(){ timer?=?setInterval(function(){ next.onclick(); },1500); } //清除定時(shí)器 function?stop(){ clearInterval(timer); } //點(diǎn)擊右箭頭 next.onclick?=?function(){ if(!animated){ if(index?==?5){ index?=?1; }else{ index?+=?1; } showButton(); animate(-960); } } //點(diǎn)擊左箭頭 prev.onclick?=?function(){ if(!animated){ if(index?==?1){ index?=?5; }else{ index?-=?1; } showButton(); animate(960); } } container.onmouseover?=?stop; container.onmouseout?=?play; play(); }
這里有個(gè)bug求解,點(diǎn)擊圓點(diǎn)圖片跳轉(zhuǎn)沒(méi)問(wèn)題,但是不會(huì)高亮,要點(diǎn)兩次才會(huì)亮起來(lái),,求解
2017-07-11
32-36行應(yīng)該是:
?? ? ? ? ? ?index?=?myIndex;
?????????????showButton();?
????????????if(!animated){
????????????????animate(offset);
????????????}
上一個(gè)動(dòng)畫(huà)執(zhí)行完了才可以執(zhí)行? animate(offset);
而你上面的是 動(dòng)畫(huà)不在執(zhí)行的時(shí)候才能執(zhí)行showButton(); 點(diǎn)第一次時(shí)在執(zhí)行動(dòng)畫(huà),這個(gè)時(shí)候執(zhí)行不了?showButton(); 點(diǎn)第二次時(shí)沒(méi)在執(zhí)行動(dòng)畫(huà)然后執(zhí)行了?showButton(); 所以出現(xiàn)你那種情況。