亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

全局加上 var animate = false; 后動畫失效,

https://img1.sycdn.imooc.com//5ad302ac0001dd7f04080425.jpg



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>


正在回答

1 回答

已解決。。。

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

全局加上 var animate = false; 后動畫失效,

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號