本文將引導(dǎo)您使用jQuery庫(kù)創(chuàng)建一個(gè)簡(jiǎn)單的圖片輪播。我們將使用bxSlider庫(kù)，它基于jQuery構(gòu)建，并提供許多配置選項(xiàng)來設(shè)置輪播。

如今，圖片輪播已成為網(wǎng)站必備功能——一圖勝千言！

決定使用圖片輪播后，下一個(gè)問題是如何創(chuàng)建它。首先，您需要收集高質(zhì)量、高分辨率的圖片。

接下來，您需要使用HTML和一些JavaScript代碼來創(chuàng)建圖片輪播。網(wǎng)絡(luò)上有很多庫(kù)可以幫助您以不同的方式創(chuàng)建輪播。我們將使用開源的bxSlider庫(kù)。

bxSlider庫(kù)支持響應(yīng)式設(shè)計(jì)，因此使用此庫(kù)構(gòu)建的輪播可以適應(yīng)任何設(shè)備。您肯定知道，如今構(gòu)建響應(yīng)式網(wǎng)站、適應(yīng)不同設(shè)備至關(guān)重要。因此，選擇第三方庫(kù)構(gòu)建輪播時(shí)，響應(yīng)式設(shè)計(jì)是必不可少的特性。

在下一節(jié)中，我們將開始探索bxSlider庫(kù)的基礎(chǔ)知識(shí)和設(shè)置過程。接下來，我們將構(gòu)建一個(gè)實(shí)際示例，演示bxSlider庫(kù)的使用。最后，我們將了解bxSlider庫(kù)支持的一些重要參數(shù)，這些參數(shù)允許您根據(jù)自己的需求自定義輪播。

什么是bxSlider？

如果您正在尋找基于jQuery的內(nèi)容輪播，bxSlider是最好用和最簡(jiǎn)單的庫(kù)之一，它允許您非常輕松地創(chuàng)建內(nèi)容和圖片輪播。

讓我們快速了解一下它提供的功能：

• 它完全響應(yīng)式，并適應(yīng)所有類型的設(shè)備。
• 它支持不同的顯示模式，例如水平、垂直和淡入模式。我們稍后將在文章中詳細(xì)介紹。
• 輪播內(nèi)容可以是任何內(nèi)容：圖片、視頻或HTML文本。
• 它支持所有流行的瀏覽器。
• 它提供了各種配置選項(xiàng)，允許您根據(jù)自定義需求自定義輪播。
• 最后但并非最不重要的一點(diǎn)是，它易于實(shí)現(xiàn)，我們將在下一節(jié)中看到。

現(xiàn)在，讓我們看看bxSlider庫(kù)的安裝過程。在本文中，我將使用CDN URL加載必要的JavaScript和CSS文件，但您也可以從官方bxSlider GitHub倉(cāng)庫(kù)下載或克隆這些文件。

包含JavaScript和CSS文件

您需要做的第一件事是在您的HTML文件中包含必要的JavaScript和CSS文件，如下面的代碼片段所示。

<code><link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">
<br><br><br></code>

您可以將上述代碼包含在HTML文檔的標(biāo)簽中。如您所見，我已經(jīng)從CDN URL加載了必要的文件。如果您已為項(xiàng)目下載了這些文件，則需要為每個(gè)文件提供正確的路徑。

設(shè)置輪播內(nèi)容

在本節(jié)中，我們將了解如何在HTML文件中設(shè)置輪播內(nèi)容。

讓我們看看下面的代碼片段。

<code><div class="slider">
<br><h2>Slide One</h2>
<br><h2>Slide Two</h2>
<br><h2>Slide Three</h2>
<br>
</div>
<br></code>

在上面的示例中，我們?cè)O(shè)置了三個(gè)幻燈片，在初始化輪播時(shí)會(huì)在它們之間輪播。需要注意的是，上面的代碼片段中，主<div>元素中使用了CSS類。目前，我們使用<code>slider作為我們的CSS類，因此我們將在bxSlider的設(shè)置過程中使用此值。

當(dāng)然，您可以使用任何內(nèi)容，而不僅僅是文本。當(dāng)我們查看如何構(gòu)建完整的圖片輪播時(shí)，我們將在下一節(jié)中回到這一點(diǎn)?，F(xiàn)在，您只需要記下我們?cè)谥?code><div>元素中提供的CSS類。<p>我們的輪播僅使用原始HTML看起來并不好看，因此我們將添加一些額外的CSS，指定標(biāo)題的背景、字體大小和文本對(duì)齊方式。</p> <pre class="brush:php;toolbar:false">body {&lt;br&gt; margin: 20px auto;&lt;br&gt; font-family: 'Lato';&lt;br&gt; font-weight: 300;&lt;br&gt; width: 600px;&lt;br&gt;}&lt;br&gt;&lt;br&gt;div.slider h2 {&lt;br&gt; text-align: center;&lt;br&gt; background: orange;&lt;br&gt; font-size: 6rem;&lt;br&gt; line-height: 3;&lt;br&gt; margin: 0;&lt;br&gt;}&lt;br&gt;</pre> <h3 id="初始化bxSlider">初始化bxSlider</h3> <p>到目前為止，我們已經(jīng)包含了必要的庫(kù)文件并為我們的輪播設(shè)置了HTML內(nèi)容。唯一剩下的就是初始化bxSlider，將我們的靜態(tài)HTML內(nèi)容轉(zhuǎn)換為一個(gè)外觀精美的旋轉(zhuǎn)輪播！</p> <p>讓我們看看初始化輪播的代碼片段。</p> <pre class="brush:php;toolbar:false">&lt;br&gt; $(document).ready(function(){&lt;br&gt; $('.slider').bxSlider();&lt;br&gt; });&lt;br&gt;&lt;br&gt;</pre> <p>這是JavaScript代碼，因此您也可以將其放在<code><script></script>標(biāo)簽中?；蛘吣梢詫⑵浞旁贖TML文件底部標(biāo)簽的正上方，以便在頁面加載完畢后運(yùn)行JavaScript。如果您更愿意將其放在<script></script>標(biāo)簽中，則需要確保在加載必要的JavaScript和CSS文件后放置它。

如您所見，我們使用slider CSS類來初始化我們的輪播。

通過這三個(gè)簡(jiǎn)單的步驟，您就使用基于jQuery的bxSlider庫(kù)構(gòu)建了一個(gè)響應(yīng)式輪播！這是一個(gè)CodePen演示，展示了輪播的實(shí)際效果：

在下一節(jié)中，我們將擴(kuò)展到目前為止我們討論的內(nèi)容，我們將嘗試通過使用bxSlider庫(kù)提供的各種配置選項(xiàng)來構(gòu)建輪播。

構(gòu)建實(shí)際示例

在上一節(jié)中，我們討論了如何使用bxSlider庫(kù)設(shè)置基本的輪播。在本節(jié)中，我們將介紹一個(gè)實(shí)際示例，演示如何為您的網(wǎng)站構(gòu)建旋轉(zhuǎn)圖片輪播。

在您的文檔根目錄下，創(chuàng)建一個(gè)包含以下代碼片段的HTML文件。

<br><br><br><br><link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet"><br><br><br><br><br><div class="slider">
<br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355471357.jpg" class="lazy" title="A Beautiful Landscape" alt="如何構(gòu)建簡(jiǎn)單的jQuery滑塊" ></div>
<br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355685315.jpg" class="lazy" title="Stationery on Table" alt="如何構(gòu)建簡(jiǎn)單的jQuery滑塊" ></div>
<br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355874714.jpg" class="lazy" title="A Coffee Mug" alt="如何構(gòu)建簡(jiǎn)單的jQuery滑塊" ></div>
<br>
</div><br><br>            $('.slider').bxSlider({<br>                autoControls: true,<br>                auto: true,<br>                pager: true,<br>                slideWidth: 600,<br>                mode: 'fade',<br>                captions: true,<br>                speed: 1000<br>            });<br>        <br><br><br>

設(shè)置好后，您的幻燈片應(yīng)該如下所示：

上面示例中的代碼應(yīng)該看起來很熟悉。它與我們已經(jīng)討論過的內(nèi)容非常相似。唯一不同的是，我們使用bxSlider庫(kù)支持的一些配置選項(xiàng)初始化了我們的輪播。讓我們仔細(xì)看看該代碼片段。

$('.slider').bxSlider({<br>    autoControls: true,<br>    auto: true,<br>    pager: true,<br>    slideWidth: 600,<br>    mode: 'fade',<br>    captions: true,<br>    speed: 1000<br>});<br>

autoControls參數(shù)

autoControls參數(shù)添加控件，允許用戶啟動(dòng)和停止幻燈片。默認(rèn)情況下，它設(shè)置為false，因此如果您想顯示控件，則需要將其顯式設(shè)置為true。

auto參數(shù)

auto參數(shù)允許您在頁面加載時(shí)自動(dòng)啟動(dòng)幻燈片。默認(rèn)情況下，它設(shè)置為false。

pager參數(shù)

pager參數(shù)向幻燈片添加分頁器。

slideWidth參數(shù)

slideWidth參數(shù)允許您設(shè)置幻燈片的寬度。如果您對(duì)幻燈片使用水平選項(xiàng)，則此參數(shù)是必須的。

mode參數(shù)

mode參數(shù)允許您配置幻燈片之間過渡的類型。您可以從中選擇三個(gè)選項(xiàng)——水平、垂直和淡入。在上面的示例中，我們使用了淡入選項(xiàng)，因此在從一個(gè)幻燈片切換到另一個(gè)幻燈片時(shí)，您將看到淡入效果。

captions參數(shù)

captions參數(shù)用于如果您想為每個(gè)幻燈片顯示標(biāo)題。標(biāo)題是從圖片元素的title屬性中獲取的。如您所見，我們?cè)谑纠袨樗袌D片提供了title屬性。

speed參數(shù)

speed參數(shù)允許您配置幻燈片過渡持續(xù)時(shí)間，并以毫秒為單位設(shè)置。在我們的示例中，我們將其設(shè)置為1000，因此幻燈片將每秒旋轉(zhuǎn)一次。

bxSlider還有許多其他配置選項(xiàng)——您可以在官方bxSlider選項(xiàng)文檔中了解它們。繼續(xù)探索bxSlider庫(kù)中提供的不同選項(xiàng)。它還提供了許多使用JavaScript回調(diào)方法的自定義可能性。

結(jié)論

今天，我們討論了如何使用jQuery庫(kù)設(shè)置基本的輪播。為了演示，我們選擇了基于jQuery庫(kù)的bxSlider庫(kù)。我們還通過使用bxSlider庫(kù)提供的各種配置選項(xiàng)構(gòu)建了一個(gè)實(shí)際示例。