SOURCE

let n 
init()
let time = setInterval(()=>{
    makeLeave(getImage(n))
        .one('transitionend',(e)=>{
            makeEnter($(e.currentTarget))
        })
    makeCurrent(getImage(n+1))
    n += 1
},3000)

document.addEventListener('visbilitychange',function(e){
  if(document.hidden){
    window.clearInterval(timer)
  }else{
     time = setInterval(()=>{
    makeLeave(getImage(n))
        .one('transitionend',(e)=>{
            makeEnter($(e.currentTarget))
        })
    makeCurrent(getImage(n+1))
    n += 1
},3000)
  }
})




function getImage(n){
    return $(`.images > img:nth-child(${x(n)})`)
}

function x(n){
    if(n>3){
        n = n%3
        if(n === 0){
            n = 3
        }
    }
    return n
}

function init(){
    n = 1
  $(`.images > img:nth-child(${n})`).addClass('current')
    .siblings().addClass('enter')
}

function makeCurrent($node){
    return $node.removeClass('enter leave').addClass('current')
  }
  function makeLeave($node){
    return $node.removeClass('enter current').addClass('leave')
    return $node
  }
  function makeEnter($node){
    return $node.removeClass('current leave').addClass('enter')
  }

  <div class="window">
    <div class="images" id=images>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543944704208&di=d4fb8a222f125e395bfb3e44a2a0b369&imgtype=0&src=http%3A%2F%2Fpic42.photophoto.cn%2F20170103%2F1155116883375520_b.jpg" width=300 alt="图片1" height=200>
      <img src="https://canna-pet.com/wp-content/uploads/2017/06/20-longest-living-dog-breeds_canna-pet-e1498599846169.jpg" width=300 alt="" height=200>
      <img src="https://fthmb.tqn.com/0ui_Zw01Ht9NHJkSBlqOIC1IH44=/960x0/filters:no_upscale()/yorkshire-terrier-583788122-581630e85f9b581c0b018a00.jpg" width=300 alt="" height=200>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543944744069&di=3ae9f3f8034f49565a0bedc879bcd336&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F728da9773912b31be8eb5f0c8c18367adab4e114.jpg" width=300 alt="" height=200>
    </div>
  </div>

<!--   <span id=buttons>
    <span class="active">第1张</span>
    <span>第2张</span>
    <span>第3张</span>
    <span>第4张</span>
  </span>
  <div id="num">9</div> -->

*{margin:0;padding:0;}
*{box-sizing: border-box;}

.window{
    width:300px;
    height:200px;
    margin:30px auto;
    overflow: hidden;
}
.images{
    position: relative;
}
.images > img{
    width:100%;
    transition:all 1500ms;
    position: absolute;
    top:0;
}
.images > img.current{
    left: 0;
    transform: translateX(0);
    z-index: 1;
    opacity: 1;
}
.images > img.leave{
    transform: translateX(-100%);
    z-index: 1;
    opacity: 0;
}
.images > img.enter{
    transform: translateX(100%);
    opacity: 0;
}