<style>
	#papa { margin: auto; width: 460px; height: 600px; overflow: hidden; white-space: nowrap; position: relative; }
	#papa img { width: 460px; }
	.navBtn { margin: 4px; width: 26px; height: 26px; border: 2px dotted silver; border-radius: 50%; text-align: center; line-height: 26px; font-size: 14px; cursor: pointer; display: inline-block; }
	.navBtn:hover { color: red; background: silver; }
	.redBorder { border-color: red; cursor: default; }
	.tMid { margin: 10px; text-align: center; }
</style>

<div id="papa">
	<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji01.jpg" />
	<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
	<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji03.jpg" />
	<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
	<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji05.jpg" />
	<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji06.jpg" />
</div>
<p class="tMid">
	<span class="navBtn redBorder">1</span>
	<span class="navBtn">2</span>
	<span class="navBtn">3</span>
	<span class="navBtn">4</span>
	<span class="navBtn">5</span>
	<span class="navBtn">6</span>
</p>

<script>
//图片、按钮
var images = papa.querySelectorAll('img'), 
	btns = document.querySelectorAll('.navBtn');
//按钮点击事件
btns.forEach((btn,key) => {
	btn.onclick = () => {
		images[key].scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
		btns.forEach((b,k) => {
			b.className = k === key ? 'navBtn redBorder' : 'navBtn';
		});
	}
});
//滚动第一张图片
images[0].scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
</script>