<style>
	#papa {margin: auto;width: 460px;height: 600px;background: #eee;line-height: 0;overflow: hidden;position: relative;}
	#papa img {width: 100%;height: 100%;}
</style>

<div id="papa"></div>
<p style="text-align: center">
	<input id="next" type="button" value="翻页" />
	<span id="picMsg"></span>
</p>

<script>
let idx = 0, step = 1; //idx ：图片索引，step ：翻页歩幅
//图片数组
const pics = [
	'https://638183.freep.cn/638183/t24/biu/ji01.jpg',
	'https://638183.freep.cn/638183/t24/biu/ji02.jpg',
	'https://638183.freep.cn/638183/t24/biu/ji03.jpg',
	'https://638183.freep.cn/638183/t24/biu/ji04.jpg',
	'https://638183.freep.cn/638183/t24/biu/ji05.jpg',
	'https://638183.freep.cn/638183/t24/biu/ji06.jpg'
];
//加载图片
for(let j = 0; j < pics.length; j ++) {
	let image = document.createElement('img');
	image.src = pics[j];
	image.alt = '';
	image.title = '图' + (j + 1);
	papa.appendChild(image);
}
//翻页按钮点击事件
next.onclick = () => {
	papa.scroll({left: 0, top: (idx + step) * 600, behavior: 'smooth'});
	idx += step;
	picMsg.innerText = pics.length + '/' + (idx + 1);
	if(idx === 0 || idx === pics.length - 1 ) step = -step;
};
//页面启动时图片总数和当前图片序号
picMsg.innerText = pics.length + '/1';
</script>