最近公司專案中用到了輪播圖，由於公司職責分離，靜態頁面已經寫好了，我只需要負責使用vue新增互動效果即可。我得到的DOM結構如下：

<ul>
    <li class="banner-prev">
      <div class="widget-banner-item">
        <div class="widget-banner-item-text ">
          <p class="widget-banner-item-subtitle">彩虹六號</p>
        </div>
 

      </div>
    </li>
    <li class="banner-cur">
      <div class="widget-banner-item">
        <div class="widget-banner-item-text ">
          <p class="widget-banner-item-subtitle">H1Z1</p>
        </div>
      </div>
    </li>
    <li class
 
="banner-next">
      <div class="widget-banner-item">
        <div class="widget-banner-item-text ">
          <p class="widget-banner-item-subtitle">H1Z1-新版本</p>
        </div>
      </div>
    </li>
</ul>

頁面結構大概長這樣，我現在需要做的，只是不斷把banner-prev、banner-cur、banner-next幾個類在3個li之間來回切換就可以了。那麼我的做法是遍歷這裡面的所有li，設定curIndex來記錄當前放大顯示(類名為banner-cur)的li，然後通過curIndex+1和curIndex-1來得到prev和next類的下標。

for (var i=0; i<len; i++) {
  var item = this.gameList[i];
  if (i == curIndex - 1) {
    item.className = 'banner-prev';
  } else if (i == curIndex + 1) {
    item.className = 'banner-next';
  } else if (i == curIndex) {
    item.className = 'banner-cur';
  }

這種正常情況下的計算當然很簡單，但是如果涉及到下面這種情況

那麼我們可能要做如下判斷

if (curIndex === arr.length) {
  next = 0;
}
if (curIndex === 0) {
  prev = arr.length-1;
}

下面這一串判斷和上面的新增類的判斷新增在一起，相當複雜，而且會多出很多if語句，有沒有更方便的方式呢？答案如下：

function setClass(curIndex) {
  for (var i=0; i<len; i++) {
    var item = this.gameList[i];
    if (i == lengLoop(idx-1,len)) {
      item.class = 'banner-prev';
    } else if (i==idx) {
      item.class = 'banner-cur';
    } else if (i==lengLoop(idx+1,len)) {
      item.class = 'banner-next';
    } else {
      item.class = "";
    }
  }
}
function lengLoop(i,len){
  return (i+len)%len;
}

lengLoop這個方法專門用來處理計算某個突出顯示的內容的下標(索引)以及前一位和後一位分別是多少的情況。比如說陣列的長度為5，如果curIndex=2, 那麼自然而然（2-1+5)%5=1, （2+1+5）%5=3，就屬於正常的情況。如果curIndex=0,此時我們要得到的prev的下標應該是4，那麼0-1得到的是-1.直接%5得到的還是-1，如果得到正數而又不影響結果呢？-1+5剛好等於4, 因此此時我們執行的操作就是(0-1)+陣列的長度%陣列的長度得到的就是4了。如果curIndex為4，此時要得到的next應該為0，那麼此時我們通過(4+1+5）%5得到的結果就是0。這種演算法讓程式碼看起來簡潔了非常多。