SOURCE

var n = 0
var len = $("#images img").length
var time = setTime(len-1)

$(".window").on("mouseenter",function(){
  window.clearInterval(time)
}).on('mouseleave', function() {
  time = setTime(len-1) 
})
$("#buttons").on("click","span",function(){
  n = $(this).index()
})
function setTime(num){
  return setInterval(function(){
  		$("#images").css({transform :'translateX('+(-300*n)+'px)'})
  		$("#buttons span").removeClass("active").eq(n).addClass("active")
  		n = n <num ? n+1 :0;
	},1000)
}
 

  <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>

 .images{
      display: flex;
      align-items: flex-start;
      transition: all 0.5s;
    }
    .images > img{
      vertical-align: top;
    }
/* .images:hover{
  transform :translateX(-100px)
} */
    .window{
      width: 300px;
      overflow: hidden;
    }
.active{
  color:red;
}
#buttons span{
  cursor:pointer
}