国产视频app網站流量大了就需要對網站前臺的模版做一些簡化工作,一是可以提高網站前臺的加載速度,二是如果使用CDN靜態資源加速的話可以減少CDN的使用量,盡量的降低網站的成本開支。

今天給大家介紹一款實用又小巧的 jQuery 響應式幻燈片插件 ResponsiveSlides.js

ResponsiveSlides.js 是一款小巧的 jQuery 響應式幻燈片插件,壓縮后僅僅只有4KB。它兼容幾乎所有的瀏覽器,包括 老掉牙的IE6 以及各種移動平臺上的瀏覽器。雖然他的樣子比較單一,但是我們可以利用CSS來美化出各種各樣的效果來。

国产视频app你可以在本文未下載到 'ResponsiveSlides.js’'以及它的demo文件,也可參考本站的幻燈片(ResponsiveSlides.js 二次開發了一下)

ResponsiveSlides.js 使用方法

国产视频app1、引入相關的文件

<link rel="stylesheet" href="responsiveslides.css">
<script src="jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

在使用之前,必需要引入jquery.js,不然幻燈片無法正常運行的。

2、html代碼

<ul class="rslides" id="slider1">
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
</ul>

国产视频appHTML的代碼也相當的簡單,只需要 li 標簽 和 img標簽即可。

3、js代碼

$(function () {
    $("#slider1").responsiveSlides({
    maxwidth: 800,
    speed: 800,
    pager: true,
    nav: true,
    });
}

js代碼中可以設置幻燈片的參數,比如切換時間,停留時間,是否開啟導航等等

ResponsiveSlides.js 相關參數

国产视频app下圖為 ResponsiveSlides.js 的參數設置,當然你也可以下載本文未的DEMO示例本地查看

国产视频app如果參數的類型為布爾值,那么開啟是用 true 表示,關閉是用 false 來表示

QQ截圖20190717121124.jpg

JQuery幻燈片插件ResponsiveSlides.js平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 0.05M MB