其实原理就是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;">向左滑动看更多照片>>></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>
各位在日常运营编辑过程中,除了前端的呈现以外,也要有意识去发现背后的逻辑规律,就可以举一反三,这样才能实现更快速的成长!