tft每日頭條

 > 圖文

 > splayer使用教程

splayer使用教程

圖文 更新时间:2025-01-26 18:32:38

首先國外現在用的較多的2個幻燈片插件:Revolution_Slider和layerslider,都有WordPress插件可以直接安裝在WordPress上使用,不過是收費的11美刀,WordPress插件需要18美刀。

ps:如果你需要,聯系我,你懂得。

版本5和4有很多的區别,如果有出入,請檢查自己的版本。

layerslider也差不多。不過和第一個幻燈片組件原理基本上是一樣的。

請看效果:

splayer使用教程(酷斃了的幻燈片插件layerslider5之1)1

一、先說說其功能:

  • 響應式

  • 支持移動設備觸摸功能

  • 2D、3d的支持

  • 支持視差效果

  • 支持自定義圖片

  • 無限層支持

  • 支持水印

  • 13種皮膚,換可以自定義

    好多沒有用的東東,懶得說,例如支持視頻、縮略圖導航等。

二、設計理念:

  1. 一張大的圖片作為背景,英文的說法是一張幻燈片。

  2. 在這個背景幻燈片上分了好多層的概念,理論上是無限,如果你的網站能跑起來,每一個層可以是圖片、文字、視頻、音樂等。

  3. 每一個層可以自己定義進入場的效果,但是如果定義位置呢?

  4. 以幻燈片的左上角為基準,而不是div的左上角,大家一定要搞清楚。這樣當層設置了50% 50%的時候,顯而易見的是在幻燈片的中央。

三、需要第三方支持:

  1. jquery

  2. GreenSock 先進的網絡動畫庫,以建立漂亮炫目的過渡效果

四、用法:

  1. 引入需要的js和css文件:

  2. 初始化js:

    splayer使用教程(酷斃了的幻燈片插件layerslider5之1)2

3、書寫html文件:

  • 最外層用<div id="layerslider"style="width: 1280px; height: 720px; margin: 0 auto;">包裹

  • 然後用<div class="ls-slide">層來放置背景幻燈片

  • 然後在用class="ls-bg" 放置背景

  • 用class="ls-l"放置各種層,包括文字、圖片以及視頻等。

  • 各種效果放置在屬性後面。

基本上就搞定了,但是我覺得大家肯定覺得我不靠譜,要麼就是那裡抄的文章,真實窦娥冤呀,我盡努力來講清楚,但是,它有些小複雜。思前想後這隻是一個前站,下一個錄制一個視頻來說一聲吧。

請等待視頻,好多的參數在視頻裡講。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved