公众号图文如何实现多图片在框架内滑动? | 公众号排版

其实原理就是HTML代码实现的,只不过公众号没有内置直观的可视化工具,但是它能够支持HTML语言。

本文以其中一种类型的图片滑动为例,其余样式的图片滑动,可以在各大编辑器后台找到,原理都是相通的。

<section class="_editor" data-support="name" data-style-id="12345"><section style="text-align: center;"> <section><section style="border-width: 0px; border-style: none; border-color: initial;"> <section style="margin: 0em auto; line-height: 25.6px; white-space: normal; border-width: 0px; border-style: none; border-color: initial;"> <section style="overflow: hidden;"> <section style="white-space: nowrap;overflow-x: scroll;">

<section class="_li" style="display: inline-block;vertical-align: top;"> <img src="https://mmbiz.qpic.cn/mmbiz_jpg/DvCIgq3s5ZOK5OHiapTK9ib5OSiaAqiatJAicrRqFTOPSibUtug4UsQYOnnWl7Q3YTVno5m6vTYqMdTBOL6qzStC8fgQ/0?wx_fmt=jpeg" style="display: inline;width:auto !important;max-width:100% !important;height:auto !important;" data-type="jpeg" data-ratio="0.6666666666666666"/> </section>

<section class="_li" style="display: inline-block;vertical-align: top;"> <img src="https://mmbiz.qpic.cn/mmbiz_jpg/DvCIgq3s5ZOK5OHiapTK9ib5OSiaAqiatJAicNQ9LFJDtn3ySWubHJMjqP9khQW9x1icuNuKIEameORHRricVg6hiaYMSw/0?wx_fmt=jpeg" style="display: inline;width:auto !important;max-width:100% !important;height:auto !important;" data-type="jpeg" data-ratio="0.6666666666666666"/> </section>

<section class="_li" style="display: inline-block;vertical-align: top;"> <img src="https://mmbiz.qpic.cn/mmbiz_jpg/DvCIgq3s5ZOK5OHiapTK9ib5OSiaAqiatJAicPwgl11HYEtDiaIPGUE0diav5g4PSTfyLbiaBggBNDAGd5MjUsxDpXInNA/0?wx_fmt=jpeg" style="display: inline;width:auto !important;max-width:100% !important;height:auto !important;" data-type="jpeg" data-ratio="0.6666666666666666"/> </section>

<section class="_li" style="display: inline-block;vertical-align: top;"> <img src="https://mmbiz.qpic.cn/mmbiz_jpg/DvCIgq3s5ZOK5OHiapTK9ib5OSiaAqiatJAichicfEUf5bvaP8DaSUJI2BXZMuVL50ziablKM8mDWtfdzhxOVo1ibO6mrQ/0?wx_fmt=jpeg" style="display: inline;width:auto !important;max-width:100% !important;height:auto !important;" data-type="jpeg" data-ratio="0.6666666666666666"/> </section>

<section class="_li" style="display: inline-block;vertical-align: top;"> <section class="_editor"> <br/> </section> </section> </section> </section> </section> </section> </section><span style="font-size: 14px; color: rgb(255, 76, 0);"><strong><strong style="font-size: 14px; text-align: center; white-space: normal;">向左滑动看更多照片&gt;&gt;&gt;</strong></strong></span> </section>

不难发现,上面每一个分段,都代表着一张图片,只要发现规律,然后在每一个开始和终结点之间,插入新的重复格式代码,替换图片链接地址即可实现多图片滑动。

<section class="_li" style="display: inline-block;vertical-align: top;"> <img src="图片地址" style="display: inline;width:auto !important;max-width:100% !important;height:auto !important;" data-type="jpeg" data-ratio="0.6666666666666666"/> </section>

各位在日常运营编辑过程中,除了前端的呈现以外,也要有意识去发现背后的逻辑规律,就可以举一反三,这样才能实现更快速的成长!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容