????????????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");??
?????????????var?index?=?1;//顯示小圓點(diǎn)??
?????????????var?animated?=?false;?
?????????????var?interval=2000;??
??????????????var?timer;??
?????????????????????????????????????????????????????????????????????????????????????????????????????
????????????function?animate(change){???
????????????animated=true;?
????????????var?newleft=parseInt(list.style.left)+change;??
????????????? var?time=100;//位移總時(shí)間????????????
????????????? var?interval=50;//位移間隔時(shí)間?
????????????? var?speed=change/(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>-590)
????????????? ???????????? {
????????????? ???????????? list.style.left=?-5310+"px";
????????????? ???????????? }
????????????? ???????????? if(newleft<-5310)
????????????? ???????????? { ???
????????????? ???????????? ??list.style.left=-590+"px";
????????????? ???????????? ??}
????????????? ???????????? ? animated=false;
????????????? ???????????? ? ?????????
????????????? ???????????? ? ????????} ???
????????????? ????????? }?go();?????????
????????????? ????????? ???}??????????????????
????????????? ???????????function?showbutton()?{???????
????????????? ????????????????????for?(var?i?=?0;?i?<?buttons.length?;?i++)?{???
????????????? ?????????????????if(?buttons[i].className?==?"on"){?????
????????????? ??????????????????buttons[i].className?=?"";???
????????????? ?????????????????????break;???????????????
????????????? ??????????????????????????}????????
????????????? ??????????????????????????????????}???????
????????????? ??????????????buttons[index?-?1].className?=?"on";??
????????????? ????????????????????????}???????
????????????? ??????????????function?play()?{????
????????????? ???????????????timer?=?setTimeout(function?()?{?
????????????? ???????????????next.onclick();????????
????????????? ????????????????play();?????????
????????????? ?????????????},?interval);???
????????????? ??????????????????????????????????????????????????}??????
????????????? ???????????????function?stop()?{????????
????????????? ???????????????????????clearTimeout(timer);???
????????????? ????????????????????????????????}???
????????????? ?????????????????????????????????????????//左箭頭???????
????????????? ??????????????????????????????????????????????prev.onclick=function(){??????
????????????? ???????????????????????????????????????????????????? if(index==1){?????????
????????????? ???????????????????????????????????????????????????? index=8;??
????????????? ???????????????????????????????????????????????????? ??? ?????????? }???
????????????? ???????????????????????????????????? else{???????????? index?-=1;???????????? }???????????? showbutton();???????????? if(animated==false){???????????? animate(590);???????????? }????????????}????????????//右箭頭????????????next.onclick=function(){???????????? if(index==8){???????????? index=1;???????????? ?}???????????? else{???????????? index?+=1;???????????? }???????????? showbutton();???????????? if(animated==false){???????????? animate(-590);????????????}????????????}????????????//小圓點(diǎn)點(diǎn)擊事件?????????????for?(var?i?=?0;?i?<?buttons.length;?i++)?{????????????????buttons[i].onclick?=?function?()?{????????????????????if?(animated)?{????????????????????????return;????????????????????}????????????????????if(this.className?==?"on")?{????????????????????????return;????????????????????}????????????????????var?myIndex?=?parseInt(this.getAttribute("index"));????????????????????var?change=?-590?*?(myIndex?-?index);????????????????????animate(change);????????????????????index?=?myIndex;????????????????????showbutton();????????????????}????????????}????????????container.onmouseover?=?stop;????????????container.onmouseout?=?play;????????????play();?????????}
2019-01-09
問題在代碼里的數(shù)字不符,圖片寬600 不是590 ,按鈕只有 5個(gè),不是8 個(gè)