微信推文里的轮播图

Posted 2021-09-03 阿Paul

推文里默认宽度都为100%；图片插入都为p标签，所以可以用section标签来区分代码自已写的还是上传图片时编辑器自动生成的。

<section id="轮播" style="background:url(背景图) no-repeat 0 0 / 100%;">
    <section id="图片容器" style="width:100%;overflow-x:scroll;">
        <section id="超宽的容器" style="width:200%;max-width:none !important;overflow:hidden;">
            <section id="图片1容器" style="width:50%;float:left;"><img src="图1" style="display:block;width:100%;"></section>
            <section id="图片2容器" style="width:50%;float:left;"><img src="图2" style="display:block;width:100%;"></section>
        </section>
    </section>
</section>

• 图片容器设置横向超出部出现滚动条
• 超宽容器width设置成图片的数量x100%，此处2张图片设置成200%。去掉max-width是因为推文中默认为100%。overflow可以使其有高度。
• 最里面的图片，此处为2张，所以每张50%，如果3张就设置为33.33%，float:left是让图片不换行，在一排并列。图片设置为display:block;可以去掉图片底下自动产生的空格。