全局加上 var animate = false; 后動畫失效,
po上代碼
<script> window.onload?=?function(){ var?content?=?document.getElementById('content'), ????list?=?document.getElementById('list'), ????buttons?=?document.getElementById('buttons'), ????icon?=?buttons.getElementsByTagName('li'), ????prev?=?document.getElementById('prev'), ????next?=?document.getElementById('next'), ????index?=?1,?//默認點亮第一個icon ????animate?=?false;//動畫運行初始關閉 ????function?showIcon(){ ????????for(var?i?=?0;?i?<?icon.length;?i++){ ????????????if(icon[i].className?==?'on'){ ????????????????icon[i].className?=?''; ?????????????? ????????????}??????? ????????} ????????icon[index?-?1].className?=?'on'; ????} ????function?animate(offste){ ?????????animate?=?true; ????????var?newLeft?=?parseInt(list.style.left)?+?offste; ????????var?time?=?300;//移動總時間 ????????var?inteval?=?10;//移動間隔時間 ????????var?speed?=?offste/(time/inteval);//每次位移量 ??????? ????????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,?inteval)//遞歸 ???????????}else{? ????????????????animate?=?false; ????????????????list.style.left?=?newLeft?+?'px'; ????????????????if(newLeft?>?-500){ ????????????????????list.style.left?=?-2500?+?'px'; ????????????????}if(newLeft?<?-2500){ ????????????????????list.style.left?=?-500?+?'px'; ????????????????} ???????????}? ????????} ??????go();? ????} ????next.onclick?=?function(){ ????????if(index?==?5){ ????????????index?=?1; ????????}else{ ????????????index?+=1; ????????} ????????showIcon(); ????????if(!animate){ ??????????animate(-500); ????????} ???????? ????}; ????prev.onclick?=?function(){ ????????if(index?==?1){ ????????????index?=?5; ????????}else{ ??????????index?-=?1;?? ????????}??????????????????? ????????showIcon(); ????????if(!animate){ ??????????animate(500);? ????????} ???????? ????} ????//按鈕切換 ????for(var?i?=?0;?i?<?icon.length;?i++){? ????????????????????????? ????????icon[i].onclick?=?function(){ ????????????if(this.className?==?'on'){?//當點擊的按鈕為當前狀態時,跳出函數。不重復執行 ????????????????return; ????????????} ????????????var?myIndex?=?parseInt(this.getAttribute('index'));?//獲取Icon的index屬性值 ????????????var?offset?=?-500?*?(myIndex?-?index);?//偏移量=(當前點擊的按鈕對應圖片的偏移量-初始偏移量)*?-500; ????????????if(!animate){ ??????????????animate(offset);?? ????????????} ???????????? ????????????index?=?myIndex;?//點擊后index索引值歸為當前狀態 ????????????showIcon(); ????????} ????} } </script>
2018-04-15
已解決。。。