利用scroll实现图片翻页功能
<style>#papa {margin: auto;width: 460px;height: 600px;background: #eee;line-height: 0;overflow: hidden;position: relative;}
#papa img {width: 100%;height: 100%;}
</style>
<h2>一、效果</h2>
<div id="papa"></div>
<p style="text-align: center"><br>
<input id="next" type="button" value="翻页" />
<span id="picMsg"></span>
</p>
<h2>二、代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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;
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>
</pre></div>
<script type="module">
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;
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';
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖最后由 马黑黑 于 2025-2-12 13:01 编辑
实现思路要点：
一、容器元素的尺寸固定好，图片在其内显示时宽高都以此为标准呈现（因而图片也应尽可能符合其宽高比例）并辅以 overflow: hidden 属性限制 inline 属性的 IMG 标签的横向扩充。此外，特别重要的，容器元素 line-height 属性要设置为0，如此，图片垂直方向的衔接方能是无缝的；
二、基于滚动条翻页行为有 scroll 和 scrollTo 以及 scrollBy三种方法，前两种是对等关系，用哪个都行，它们表示页面或元素的翻滚是以绝对距离实现，scrollBy 则依据相对距离进行，本例使用 scroll 方法；
三、图片索引与歩幅两个变量数值的变化是计算往上还是往下翻页的依据，代码在第36行。
最后说明一下，这里只是功能演示，目的是展现一下实现原理。实际应用可在此基础上加以扩充和完善。 黑黑老师又出新招了！能不用手动翻吗？ 谢谢无私分享，祝马老师元宵节快乐{:4_176:} 祝黑黑先生和家人元宵节快乐！ 翻页按钮点击事件里设置了往下翻页，到底后可以开始往上翻页呢{:4_199:} 简单地使用scroll就可以翻页，这个真好{:4_187:} 红影 发表于 2025-2-12 17:10
简单地使用scroll就可以翻页，这个真好
但是翻页是一个相对复杂的功能，不论是页面翻页还是元素内部翻页。基于翻页的编程，JS提供的方法很多，说明不是简单的功能 红影 发表于 2025-2-12 17:09
翻页按钮点击事件里设置了往下翻页，到底后可以开始往上翻页呢
这是专门设计的功能 梦江南 发表于 2025-2-12 13:51
黑黑老师又出新招了！能不用手动翻吗？
这个就是手动翻页的 杨帆 发表于 2025-2-12 16:56
谢谢无私分享，祝马老师元宵节快乐
元宵节快乐 梦油 发表于 2025-2-12 17:09
祝黑黑先生和家人元宵节快乐！
谢谢！同样祝你！ 马黑黑 发表于 2025-2-12 12:59
实现思路要点：
一、容器元素的尺寸固定好，图片在其内显示时宽高都以此为标准呈现（因而图片也应尽可能 ...
黑黑这个后面就是翻页实例教程了吧 非常漂亮的效果{:4_199:} 小辣椒 发表于 2025-2-12 20:51
非常漂亮的效果
元宵节好 小辣椒 发表于 2025-2-12 20:50
黑黑这个后面就是翻页实例教程了吧
这个实例不是实例了吗 马黑黑 发表于 2025-2-12 19:37
但是翻页是一个相对复杂的功能，不论是页面翻页还是元素内部翻页。基于翻页的编程，JS提供的方法很多，说 ...
哦，原来有很多的翻页方法啊，这个应该是最根本的吧？ 马黑黑 发表于 2025-2-12 19:37
这是专门设计的功能
嗯嗯，这样可以无限循环了呢{:4_187:} 马黑黑 发表于 2025-2-12 19:38
谢谢！同样祝你！
别客气，别客气。 梦油 发表于 2025-2-13 10:42
别客气，别客气。
{:4_191:}