龙空技术网

微技巧丨滑动样式如何添加多张图片

微互动 161

前言:

当前各位老铁们对“html5图片上加图片”都比较注意,朋友们都想要剖析一些“html5图片上加图片”的相关内容。那么小编也在网摘上收集了一些有关“html5图片上加图片””的相关知识,希望姐妹们能喜欢,我们快快来了解一下吧!

上下、左右滑动图片

周六的时候,排版君给大家介绍了如何用代码来设置左右滑动图片的教程,但是本着高效、快速的原则,同时也造福对代码不熟悉的小伙伴,i排版买一送一,同时上线图片上下、左右滑动两个样式,从此,你的微信也能轻松实现HTML5的滑动效果啦!

>>>>

左右滑动(按住图片左右滑动)

>>>>

上下滑动(按住图片上下滑动)

▌ 在这两组滑动样式中,最多可插入6张图片,多余的图片可以直接删除。不管是左右滑动还是上下滑动,对图片的高度均不限制,但宽度统一。所以大家在替换时尽量选择同一尺寸的图片,以免影响读者的阅读。

替换图片时,点击样式中的原图,然后通过i排版的“图片工具条”的替换按钮即可替换。删除图片时同样选中然后delete就好。(提示:这两组样式中的后三张图片在选择时可能导致网页出现一定程度的拉长,但不影响正常的图片替换和样式使用)

最后,由于在手机上阅读时,并没有滑动条,所以记得在使用该样式时提醒下你的读者,“滑动图片有惊喜哦!”排版君再送大家几组小符号,上下左右直接复制到你的文章中提醒读者。

☜ ☞

◀ ►

☝ ☟

▲ ▼

最近i排版交流群里,有一些小伙伴都在问,怎么在我们的滑动样式里面多添加几张图片,是不是最多只能有六张图片在滑动样式中展现。

当然不是!其实我们设置默认为六张图片,是考虑大家用这个样式不会添加太多图片。其实图片的数量,可以由小伙伴们任意添加。那究竟应该怎么做呢?Follow me!1分钟让大家学会滑动样式多图展示。

▌1.首先我们先在【卡片】样式的3或4位添加一个滑动样式

▌2.在添加进来的样式中,任意点击一张图片,使其周围出现8个小方形

▌3.这时使用键盘的方向键,点击左、右键或上、下键,使闪烁的光标停留在两张图片之间(如下图所示):

▌4.此时点击工具栏中的图片工具,直接添加图片即可。

⚑注意:请大家使用左右滑动样式的时候,尽量选用高度相同的图片;上下滑动样式,尽量选择宽度相同的图片。这样才不会影响滑动观看的效果。

下面给大家做两个示范,大家看一下效果:

请大家上下滑动查看下图

以上样式添加了10张图片

请大家左右滑动查看下图

以上样式添加了10张图片

需要提醒大家的是:目前因为滑动样式的独特性,需要大家使用快捷键Ctrl+A全选,Ctrl+C复制,然后再粘贴进微信后台,才不会格式错乱。

标签: #html5图片上加图片