图片、div元素循环显示隐藏

设置定时器控制显示隐藏，鼠标移入元素暂停

  //HTML
  <ul class="mapBox">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
//JS
 $(".mapBox li").hide()
 var len = $(".mapBox li").length
 var ix = 0; //播放所在下标
 var showTip = setInterval(function () {
   $(".mapBox li").hide().eq(ix).fadeIn(1000)
   ix++;
   if (ix >= len) {
     ix = 0;
   }
 }, 5000);
   //鼠标移入
  $(".mapBtnBox div").on('mouseover', function (e) {
    clearInterval(showTip);
    showTip = null;
    var idx = $(this).index();
    $(".mapBox li").hide().eq(idx).fadeIn(1000)
  })
   //鼠标移除
  $(".mapBtnBox div").on('mouseout', function (e) {
    showTip && clearInterval(showTip);
    showTip = setInterval(function () {
      $(".mapBox li").hide().eq(ix).fadeIn(1000)
      ix++;
      if (ix >= len) {
        ix = 0;
      }
    }, 2000);
  })