window.onload?=?function?()?{
????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;

????/**
?????*?左右切換函數
?????*?@param?offset?左右的偏移量
?????*/
????var?offsetL?=?0;
????function?animate(offset)?{
????????var?oldLeft?=?parseInt(list.style.left);
????????var?newLeft?=?oldLeft?+?offset;
????????offsetL?=?oldLeft;
????????var?interval?=?null;
????????var?intervalNum?=?10;

????????//console.log('offsetL:?'?+?offsetL);
????????//console.log('newLeft:?'?+?newLeft);

????????//?向左切換動畫
????????if((offset?>?0)?&&?(offsetL?<?newLeft))?{
????????????//console.log('左');
????????????interval?=?setInterval(function?()?{
????????????????offsetL?+=?offset/(300/intervalNum);?//?300為移動的總時間

????????????????//console.log(offsetL);

????????????????list.style.left?=?offsetL?+?'px';

????????????????if(offsetL?==?newLeft)?{
????????????????????clearInterval(interval);

????????????????????//?兩個if語句實現了無限滾動
????????????????????if(newLeft?>?-600)?{
????????????????????????list.style.left?=?-3000?+?'px';
????????????????????}

????????????????????if(newLeft?<?-3000)?{
????????????????????????list.style.left?=?-600?+?'px';
????????????????????}
????????????????}
????????????},?intervalNum);
????????}

????????//?向右切換動畫
????????if((offset?<?0)?&&?(offsetL?>?newLeft))?{
????????????//console.log('右');
????????????interval?=?setInterval(function?()?{
????????????????offsetL?-=?-offset/(300/intervalNum);?//?300為移動的總時間

????????????????//console.log(offsetL);

????????????????list.style.left?=?offsetL?+?'px';

????????????????if(offsetL?==?newLeft)?{
????????????????????clearInterval(interval);
????????????????????//?兩個if語句實現了無限滾動
????????????????????if(newLeft?>?-600)?{
????????????????????????list.style.left?=?-3000?+?'px';
????????????????????}

????????????????????if(newLeft?<?-3000)?{
????????????????????????list.style.left?=?-600?+?'px';
????????????????????}
????????????????}
????????????},?intervalNum);
????????}
????}

????/**
?????*?小圓點切換函數
?????*/
????function?buttonsCtrl()?{
????????for(var?i?=?0;i?<?buttons.length;i++)?{
????????????if(buttons[i].className?==?'on')?{
????????????????buttons[i].className?=?'';
????????????}
????????}
????????buttons[index?-?1].className?=?'on';
????}


????//?左右切換的功能
????next.onclick?=?function?()?{
????????if(index?==?5)?{
????????????index?=?1;
????????}else?{
????????????index++;
????????}
????????buttonsCtrl();

????????animate(-600);
????};

????prev.onclick?=?function?()?{
????????if(index?==?1)?{
????????????index?=?5;
????????}else?{
????????????index--;
????????}
????????buttonsCtrl();

????????animate(600);
????};

????/**
?????*?點擊小圓點切換焦點圖
?????*/
????for(var?i?=?0;i?<?buttons.length;i++)?{
????????buttons[i].onclick?=?function?()?{
????????????if(this.className?==?'on')?{
????????????????return;?//?后面的語句不會再執行了，一直到buttonCtrl()都不會再執行
????????????}
????????????var?myIndex?=?this.getAttribute('index');
????????????var?offset?=?-600?*?(myIndex?-?index);
????????????animate(offset);

????????????//?index?更新到最新
????????????index?=?myIndex;

????????????//?小圓點變成橙色
????????????buttonsCtrl();
????????};
????}
};