首先國外現在用的較多的2個幻燈片插件:Revolution_Slider和layerslider,都有WordPress插件可以直接安裝在WordPress上使用,不過是收費的11美刀,WordPress插件需要18美刀。
ps:如果你需要,聯系我,你懂得。
版本5和4有很多的區别,如果有出入,請檢查自己的版本。
layerslider也差不多。不過和第一個幻燈片組件原理基本上是一樣的。
請看效果:
一、先說說其功能:
響應式
支持移動設備觸摸功能
2D、3d的支持
支持視差效果
支持自定義圖片
無限層支持
支持水印
13種皮膚,換可以自定義
好多沒有用的東東,懶得說,例如支持視頻、縮略圖導航等。
二、設計理念:
一張大的圖片作為背景,英文的說法是一張幻燈片。
在這個背景幻燈片上分了好多層的概念,理論上是無限,如果你的網站能跑起來,每一個層可以是圖片、文字、視頻、音樂等。
每一個層可以自己定義進入場的效果,但是如果定義位置呢?
以幻燈片的左上角為基準,而不是div的左上角,大家一定要搞清楚。這樣當層設置了50% 50%的時候,顯而易見的是在幻燈片的中央。
三、需要第三方支持:
jquery
GreenSock 先進的網絡動畫庫,以建立漂亮炫目的過渡效果
四、用法:
引入需要的js和css文件:
初始化js:
3、書寫html文件:
最外層用<div id="layerslider"style="width: 1280px; height: 720px; margin: 0 auto;">包裹
然後用<div class="ls-slide">層來放置背景幻燈片
然後在用class="ls-bg" 放置背景
用class="ls-l"放置各種層,包括文字、圖片以及視頻等。
各種效果放置在屬性後面。
基本上就搞定了,但是我覺得大家肯定覺得我不靠譜,要麼就是那裡抄的文章,真實窦娥冤呀,我盡努力來講清楚,但是,它有些小複雜。思前想後這隻是一個前站,下一個錄制一個視頻來說一聲吧。
請等待視頻,好多的參數在視頻裡講。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!