html如何加入多张图片自动滚动,微技巧丨滑动样式如何添加多张图片

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

上下、左右滑动图片

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

>>>>

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

40ddc70c2a7d7d9a2d77393961aad266.png

3cb2fc0c55521bcec97bbd075d309add.png

51d1d9ae46bc15eb62b7f6d5d4142490.png

7f3ad33096a7eb57f3535c3d5cb47679.png

7473369744d8fcc7af878468ca4852a1.png

460ac148eb6d3dcfe2a92b334b007277.png

>>>>

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

af9df319c1ad40d7557393c647decee9.png

57a957b046c318173b6d014c16e23937.png

91c6107446441364ee857734f50feed3.png

2a6060a26df49d67c0eb9cfc6635eeac.png

d593adaaaaeccca8ada3b4dd516b40f4.png

70b1a3a9d59596dc6f228cf7d04730e9.png

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

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

ee38149cec99c9866474d75b2fc75821.png

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

☜ ☞

◀ ►

☝ ☟

▲ ▼

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

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

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

438ab82da12c9b1fe0d9c4d8ae7cb70f.png

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

e02543a9c5db16998879c0de25ece0ef.png

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

5f4f290965d02ef182a0214c2e6a11eb.png

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

df25fb42320323f771db11c207f645af.png

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

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

请大家上下滑动查看下图

8f9c0236e3a9999e8374d95ba49c17f8.png

6106ebaa0c787f41361add611487c5e5.png

1d47891c4fc42ce87b3c8fa40b5030b9.png

705c121a6d1566095f8b8bee2702421f.png

b7e92c809a3d5c4677a0486a72920255.png

7f4b03ec4b57f3e9c00b99be3fa97bdb.png

e80c7f18c3bf081db758326d07e4ff53.png

e3e6af325c104ab9c5c2ed9483b6b79d.png

556618d26cee356443ef0606e6e2f686.png

0388392e875e823f4edb256ed0057076.png

以上样式添加了10张图片

请大家左右滑动查看下图

84d859f5669cbbaf5c9829e6b3f1f543.png

af85c72bdf9741e160107a096d812d57.png

18ef92e623a9f292b8b3813f386adbc1.png

5aa1e71e691b5bef1bf86434e8e98f39.png

8bb939c3d2de47b73b4bc621d3c74d6b.png

7ef50fa718348deb668382ad2a8d2031.png

9d76e3bc224408a0fc2cb43ad35c0a04.png

a4580885807fb093aba0b3925b428d27.png

298819d0ca477da56ecacf745b75d4a3.png

95d7bc11d3682c4fd33552067d33fa7b.png

以上样式添加了10张图片

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

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值