微信公众号实现banner轮播图效果(轮播图制作方法)

在微信公众号中如何实现像下图一样的banner轮播图效果?你可以用135编辑器套用一个自动轮播的模板,轮播图制作方法十分方便,今天我就教教你!


怎么样,这个滑动样式是不是有点不一样?丝滑流畅,自动轮播,搭配合适的比格设计图片就能够实现炫酷的效果!悄悄告诉大家,苹果就在推文中使用过类似的效果!话不多说,教程开始!


上下左右切换图片样式ID:100167


【样式作用】:创意SVG,可以与读者进行有效的互动,帮助打造文章氛围。除此之外,还可以结合产品特性,制作出更多的玩法。


【使用说明】:如需要替换图片,请在专业版用动画功能,需要使用同步功能同步至微信公众号。


如何更换内容?


135编辑器对SVG样式做了更新,在专业版中特意添加了『动画』按钮,胖友们可以在『动画』设置中对SVG样式进行修改。


1.首先将编辑器切换至专业版,点击右侧『更多功能』,在弹出的菜单中选择『切换专业版』,即可将编辑器切换为专业版。



2.搜索样式ID:100167,找到『上下左右切换图片』样式,插入至编辑器中。



3.点击选中样式(在样式周围出现虚线框时,才算选中哦!),在弹出的菜单栏中,选择『动画』按钮,进入动画设置界面。



这里需要注意的是:只有SVG样式才会有动画按钮哦,普通的样式是没有动画按钮的。


4.在动画设置界面,我们就可以对样式内的图片进行更换了,胖友们可以选择『图片上传』按钮对图片进行替换。



注意:图片播放顺序是倒序播放,建议从最后一张开始倒序上传图片哦。


5.在图片上传界面,选择按样式图片比例裁剪上传。



这里需要注意的是:该样式只支持【4】张图片的切换,但是要上传5次图片,因为首图和尾图需要保持是同一张图片才能实现无缝轮播,否则会导致样式显示出现问题哦!


5.设置完所有内容以后,胖友们可以在右侧的预览框中进行测试,也可以返回编辑器界面,点击右侧菜单栏中的『手机预览』进行测试。



注意事项:


这里需要注意的是,由于微信公众号后台限制,所以轮播图效果排版完成后的推文需要使用保存同步功能,如果使用复制粘贴会导致样式失效哦!


- END -


点击135编辑器获取更多资讯


文章评价
登录后可以评论
立即登录
分享到