三种方法在公众号中实现图片左右滑动效果:详细教程
本文提供了一份详尽的教程,教你如何在公众号文章中实现图片的左右滑动效果,包括使用滑动样式、滑动布局和SVG滑动组件的步骤,让你的内容更具吸引力。
在公众号运营中,图片的展示方式对于吸引读者的注意力至关重要。其中,左右滑动图片效果因其互动性和视觉吸引力而备受欢迎。本文将详细介绍如何在公众号中实现这一效果,让你的内容更加生动有趣。
一、滑动样式—有样式的滑动
1.1 寻找滑动样式
首先,打开你的135编辑器。在编辑器页面左侧,找到[样式]选项。在顶部的SVG分类中,选择[滑动],这里汇集了各种滑动样式供你选择。
1.2 更换图片
以样式120420为例,如果你需要更换图片,可以按照以下步骤操作:
单击需要替换的图片。
在图片编辑选项中选择[换图]。
注意,为了保持滑动效果的一致性,新图片的尺寸应与原图一致。你可能需要对新图片进行裁剪以符合原尺寸。
1.3 编辑SVG动画
如果你需要更精细的控制,可以选择[编辑SVG动画]。在编辑页面中,根据素材大小更换图片,并进行相应的调整。
1.4 增删图片
若要增加或减少滑动中的图片数量,同样以样式120420为例:
单击滑动样式,在全局样式中选择[加一个]来增加图片。
如果需要减少图片,点击[减一个]即可。
二、滑动布局—最纯粹的滑动
2.1 创建滑动布局
在编辑器左侧顶部,找到[布局]—[基础布局]—[滑动布局]。点击[滑动布局]到编辑器页面。
2.2 设置滑动参数
在滑动布局中,你可以设置滑动方向(竖向或横向)、背景、宽度等内容。
2.3 上传并编辑图片
添加三块滑动布局。
双击每块滑动布局,进入编辑页面后上传图片。确保所有滑动素材的宽高一致。
图片之间没有空隙会显得很紧凑,可以给图片添加边距。
三、SVG滑动组件—最会玩的滑动
3.1 使用SVG编辑器
如果你需要更复杂的滑动效果,如添加超链接、小程序等,可以通过135编辑器左侧的SVG编辑器实现。
进入SVG编辑器页面,在[互动效果]中选择[滑动]。
3.2 预览效果
将鼠标放在组件上,右侧会出现效果GIF图展示,让你直观地看到最终效果。
通过上述步骤,你可以轻松地在公众号中实现图片的左右滑动效果,提升用户的阅读体验。现在,就动手试试吧!
立即登录



