SOURCE

  let lis = document.getElementById('night').querySelectorAll('li');
  let last = 0;
  let num = 7;
  let group = 1;
  let groupeds = [];
  let btn = document.getElementById('btn');
  let time = 0;
  let index = 0;
  let over = false;

  btn.addEventListener('click', function() {

    if (over) {
      return false;
    }

    if (time) {

      this.innerHTML = '开始';
      clearInterval(time);
      time = 0;
      document.querySelector('.on .mark').innerHTML = group++;
      groupeds.push(index);
      if (groupeds.length >= num) {
        over = true;
        document.querySelector('.on').classList.remove('on');
        this.innerHTML = '完成';
      }

    } 
    
    else {

      this.innerHTML = '停止';

      time = setInterval(function () {
    
        index = Math.floor(Math.random() * num);

        while ((groupeds.length < num-1 && last == index) || groupeds.indexOf(index) != -1) {
          index = Math.floor(Math.random() * num);
        }

        lis[last].classList.remove('on');

        last = index;

        lis[index].classList.add('on');
        
      }, 50);
    }
  });

<div class="btn" id="btn">开始</div>
  <ul id="night">
    <li class="li-1 on"><span class="mark"></span><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1750251320,3512334842&fm=27&gp=0.jpg" alt="周杰" title="周杰"></li>
    <li class="li-2"><span class="mark"></span><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=154430089,3428579033&fm=27&gp=0.jpg" alt="聂卫东" title="聂卫东"></li>
    <li class="li-3"><span class="mark"></span><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=154430089,3428579033&fm=27&gp=0.jpg" alt="朱威理" title="朱威理"></li>
    <li class="li-4"><span class="mark"></span><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1750251320,3512334842&fm=27&gp=0.jpg" alt="周杰" title="周杰"></li>
    <li class="li-5"><span class="mark"></span><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1198614394,3708110771&fm=27&gp=0.jpg" alt="聂卫东" title="聂卫东"></li>
    <li class="li-6"><span class="mark"></span><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1198614394,3708110771&fm=27&gp=0.jpg" alt="朱威理" title="朱威理"></li>
    <li class="li-7"><span class="mark"></span><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1750251320,3512334842&fm=27&gp=0.jpg" alt="彭海" title="彭海"></li>
  </ul>

    body {
      width: 100vw;
      height: 100vh;
      background: url(./img/bg.jpg) center no-repeat;
      background-size: cover;
      overflow: hidden;
    }

    .btn {
      position: absolute;
      left: 50%;
      top: 350px;
      transform: translateX(-40%);
      width: 150px;
      height: 150px;
      border-radius: 50%;
      line-height: 150px;
      text-align: center;
      background: #fff;
      color: #f60;
      font-size: 60px;
      font-family: 'Microsoft Yahei';
      cursor: pointer;
    }

    .btn:active {
      box-shadow: 0 0 20px rgba(0, 0, 0, 1);
      font-size: 58px;
    }

    ul {
      position: relative;
      margin: 0;
      padding: 0;
      width: 100vw;
      font-size: 0;
      text-align: center;
    }

    li {
      position: absolute;
      z-index: 10;
      width: 200px;
      height: 150px;
      overflow: hidden;
      transform: translateX(-50%);
    }

    li .mark {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      background: rgba(0,0,0,.7);
      text-align: center;
      line-height: 150px;
      color: #f60;
      font-size: 100px;
    }

    li.over .mark:after {
      content: '中';
      position: absolute;
      top: 50%;
      left: 50%;
      color: #f60;
      font-size: 30px;
      transform: translate(-50%,-50%);
    }

    li.on {
      z-index: 20;
    }

    li.on .mark {
      background: rgba(0,0,0,0);
    }

    img {
      width: 100%;
    }
    .li-1 {
      left: 50%;
      top: 100px;
    }
    .li-2 {
      left: 30%;
      top: 200px;
    }
    .li-3 {
      left: 30%;
      top: 400px;
    }
    .li-4 {
      left: 70%;
      top: 200px;
    }
    .li-5 {
      left: 70%;
      top: 400px;
    }
    .li-6 {
      left: 40%;
      top: 600px;
    }
    .li-7 {
      left: 60%;
      top: 600px;
    }