利用scrollToView实现图片翻页功能

马黑黑

效果

代码

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

马黑黑

基于元素（element）接口的 scrollIntoView 方法与浏览器的视口有关，它会将运行 scrollIntoView 方法的元素滚动到浏览器的视口。换言之，scrollIntoView 不关切滚动的距离，只要被滚动的元素不在 scrollView 规定的位置，滚动行为就会发生；当然，元素离它应滚动到的地方的实际距离会影响元素滚动动作的方式（快或慢）。

与原生基于滚动条的 scroll 方法相比，scrollIntoView 方法不用计算确切的滚动距离，省点事。

scroll 是滚动之意，into 进入，View 视口，合起来就是滚动进入视口。方法支持的参数可用 options 方式表达，例如:

element.scrollIntoView({
    behavior: 'smooth', /* 滚动行为方式 : 平滑 */
    block: 'center', /* 垂直位置 ：居中 */
    inline: 'center', /* 水平位置 ：居中 */
});

各参数的取值范围感兴趣的可以自行网搜。

一楼的演示，图片受其容器限制了位置，但在翻页的时候，图片不仅基于容器、还基于视口。大家可以尝试让整个页面向上翻页，让按钮集群显示在浏览器可视区域的顶端，然后去点击任意一个圆形按钮，看看发生什么。

梦江南

谢谢老师辛苦！学习了。

小辣椒

黑黑这个是横向效果了，可惜我不会做进帖里面，小辣椒不会的太多了

马黑黑

小辣椒 发表于 2025-2-13 15:36
黑黑这个是横向效果了，可惜我不会做进帖里面，小辣椒不会的太多了

试试就会

马黑黑

梦江南 发表于 2025-2-13 14:24
谢谢老师辛苦！学习了。

红影

这个滚动有趣，当中的图片也会闪过呢

马黑黑

红影 发表于 2025-2-13 20:03
这个滚动有趣，当中的图片也会闪过呢

这与它们所处的位置有关：它们是并排放着的

红影

马黑黑 发表于 2025-2-13 21:03
这与它们所处的位置有关：它们是并排放着的

嗯嗯，我特地去点了隔了几张的。
这个好，想看哪个就能直接看到呢

马黑黑

红影 发表于 2025-2-13 22:33
嗯嗯，我特地去点了隔了几张的。
这个好，想看哪个就能直接看到呢

图片可以使用装载文本的div替换，这意味着，这个演示可以用于发布诗文帖子

红影

马黑黑 发表于 2025-2-13 22:40
图片可以使用装载文本的div替换，这意味着，这个演示可以用于发布诗文帖子

直接文本就可以啊，还以为需要把文本变图片呢

马黑黑

红影 发表于 2025-2-14 16:02
直接文本就可以啊，还以为需要把文本变图片呢

演示用的是图片。图片是元素，div也是元素。

div是 display: block; 的默认设置，横向翻页的，许设置 display: inline-block; 属性值。或者，使用 span 替代 div，span 的 display 属性和 img 一模一样（但是 span 里 不能有 p 标签，可用 br 换行）

红影

马黑黑 发表于 2025-2-14 20:10
演示用的是图片。图片是元素，div也是元素。

div是 display: block; 的默认设置，横向翻页的，许设置  ...

“span 的 display 属性和 img 一模一样”
这个还真不知道呢，太好了
但是多行文字怎么作为一个块呢？

马黑黑

红影 发表于 2025-2-14 21:20
“span 的 display 属性和 img 一模一样”
这个还真不知道呢，太好了

所以有必要阅读文档

红影

马黑黑 发表于 2025-2-14 21:21
所以有必要阅读文档

好吧，黑黑说得有道理

马黑黑

红影 发表于 2025-2-14 21:58
好吧，黑黑说得有道理

红影

马黑黑 发表于 2025-2-14 21:21
所以有必要阅读文档

我去试了span，输入的三段文字都叠在一起了

红影

马黑黑 发表于 2025-2-14 22:23

用div加p，倒是能每一首单独出来，但没法滚动，只动一点距离。span和图片不一样啊，每一个不是独立的？

红影

设置 display: inline-block; 属性值。

——这个不知道在哪设置

马黑黑

红影 发表于 2025-2-14 23:13
设置 display: inline-block; 属性值。

——这个不知道在哪设置

img元素的替代元素相应CSS，比如div或span，你可以用一个累选择器：

.artbox {
    width: ??px;
    height: ??px;
    display: inline-block;
}

然后：

<div class=".artbox">1</div>
<div class=".artbox">2</div>
<div class=".artbox">3</div>