微技巧丨左右滑動圖片高逼格技能√

昨天,微互動群內關於圖片滑動的問題引發了一系列的討論,雖然i排版編輯器上還木有更新圖片左右滑動的樣式,但是7喜還是打算把代碼放出來給大家共享啦!


廢話不說,先來示例:

示例一:靜態圖片 取經之路

:按住圖片左右滑動


示例二:動態圖片 李7喜表情包

:按住圖片左右滑動

實現方法

1. 打開i排版編輯器;

2. 切換到</>模式,複製以下代碼粘貼進去;

實現代碼(點擊展開)

<section style="">

<p style="white-space: nowrap; overflow-x: scroll;">

<img style="width: 300px !important; margin-right: 5px; visibility: visible !important; height: auto !important;" data-ratio="0.6533333333333333" data-w="300" width_="300px" src="圖片1網址" /> &nbsp; &nbsp; &nbsp;<img style="width: 300px !important; margin-right: 5px; visibility: visible !important; height: auto !important;" data-ratio="0.6533333333333333" data-w="300" width_="300px" src="圖片2網址" /> &nbsp; &nbsp; &nbsp;<img style="width: 300px !important; visibility: visible !important; height: auto !important;" data-ratio="0.6533333333333333" data-w="300" width_="300px" src="圖片3網址" />

</p>

</section>

3. 在i排版上傳圖片,把網址複製到上面代碼中圖片1網址、圖片2網址、圖片3網址相應的位置;

4. 切回編輯模式,複製粘貼到微信編輯器;

5. 完畢

以上就是左右滑動圖片的代碼啦,小夥伴們可以進行嘗試編輯;i排版隨後也將上線相應樣式,敬請期待!

如果還想學習上下滑動代碼請關注微互動和i排版的相關教程咯~

希望和你一起進步的i排版

www.ipaiban.com

【徵稿】

即日起i排版誠徵各種排版優良的文章、賬號,歡迎大家推薦與自薦;一經採納必有獎勵,排版君還會將你的推薦展示給更多盆友哦!


i排版正在徵集「微信百萬大號養成記」調查問卷,歡迎長按二維碼跳轉填寫~


推薦閱讀:

哪些技能是給你的人氣毫無加分的?比如吹嗩吶
《傑克奧特曼》有哪些技能?
2015中西醫執業醫實踐技能第二站1
銷售人員專業技能訓練整體解決方案
明年起刷身份證就能登機,8大隱藏技能為你節省140分鐘

TAG:圖片 | 技能 | 技巧 | 左右 | 動圖 | 滑動 |