公众号文章的图片如何制作滑动效果？

发布时间：2026-01-20 18:26:04  浏览量：2

经常有小伙伴在后台咨询我们，公众号文章里，那种自动滑动或者可以手动上下左右滑动的图片排版，是怎么做的。

其实实现这个效果并不难，就算是小白新手，依靠SVG样式就能轻松实现，今天就和大家分享一下。

1、从哪里找SVG样式

以前大多数小伙伴以为这种滑动效果需要专门的设计师或者写代码才能完成，但现在借助工具，一分钟就能搞定。

首先，打开公众号排版工具96编辑器，在左侧菜单栏找到“样式-SVG样式”分类。

这里面有很多现成的互动样式，我们要找的就是“滑动”或者“轮播”相关的模板。

⏩ 趣味滑动：这类是需要手动滑动的图片样式；

⏩ 图片轮播：这类是可以自动轮播的图片样式。

我们可以根据自己的需要，来选择使用滑动或轮播样式。

2、如何编辑这类SVG样式

选择喜欢的模板后，直接点击它，这个样式就会出现在编辑区。

样式复制到编辑区后，点击一下该样式，会出现SVG动画的按钮，我们点SVG动画，进入小窗口里进行换图。

在弹出的SVG动画窗口中，我们可以修改图片移动的时间，同时可以通过点击上传图片，来增加图片的数量，以及通过图片右上方的垃圾桶按钮删除不需要的图片。

这些操作都完成后，可以点击预览，查看一下样式的整体效果，或者点击完成，直接就会插入到编辑器中了。

怎么样，操作是不是超级简单，但是有些小tips需要注意。

3、使用SVG样式需注意

⏩ 如果SVG样式下面有对应的文字提醒，我们编辑该样式的时候，要注意这些使用限制。

⏩ 除了一些比较复杂或者异形的SVG样式，其他轮播或滑动样式，上传的图片尺寸需一致。

⏩ 由于轮播、滑动等这些SVG样式是主要针对用户互动而使用代码编辑的样式，所以这类样式在进行预览时，最终效果都要以手机公众号里的效果为准，不要以电脑为准。

OK那么以上就是今天9妹带来的图文排版小技巧了，如果你对这类样式编排还有其他问题，就在评论区留言吧，9妹会一一解答。