利用scroll实现图片翻页功能

马黑黑 · 发表于 2025-2-12 12:43

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

一、效果

二、代码

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

马黑黑 · 发表于 2025-2-12 12:59

本帖最后由马黑黑于 2025-2-12 13:01 编辑

实现思路要点：

一、容器元素的尺寸固定好，图片在其内显示时宽高都以此为标准呈现（因而图片也应尽可能符合其宽高比例）并辅以 overflow: hidden 属性限制 inline 属性的 IMG 标签的横向扩充。此外，特别重要的，容器元素 line-height 属性要设置为0，如此，图片垂直方向的衔接方能是无缝的；

二、基于滚动条翻页行为有 scroll 和 scrollTo 以及 scrollBy 三种方法，前两种是对等关系，用哪个都行，它们表示页面或元素的翻滚是以绝对距离实现，scrollBy 则依据相对距离进行，本例使用 scroll 方法；

三、图片索引与歩幅两个变量数值的变化是计算往上还是往下翻页的依据，代码在第36行。

最后说明一下，这里只是功能演示，目的是展现一下实现原理。实际应用可在此基础上加以扩充和完善。