利用scroll实现图片横向翻页功能

马黑黑 · 发表于 2025-2-12 21:26

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

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

x

马黑黑 · 发表于 2025-2-12 21:27

代码

<style>
#papa { margin: auto; width: 460px; height: 600px; background: #eee; overflow: hidden; white-space: nowrap; position: relative; }
#papa img { display: inline; 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({top: 0, left: (idx + step) * 460, 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 21:31

与纵向翻页版相比，其实很简单：

CSS部分：容器元素 line-height 可以不要，通过 white-space: nowrap; 属性强制禁止换行；img 标签本来就是 inline 特性，display: inline; 仅是为了确保该属性不被改变；

JS部分：scroll() 方法中，top 和 left 对换一下，top 为 0，left 改用的是容器元素的宽度数值。