最近公司项目中用到了轮播图，由于公司职责分离，静态页面已经写好了，我只需要负责使用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。这种算法让代码看起来简洁了非常多。