圖書館網(wǎng)站制作中應(yīng)用
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了圖書館網(wǎng)站制作中應(yīng)用范文，希望能給你帶來靈感和參考，敬請閱讀。
摘要：互聯(lián)網(wǎng)時(shí)代，圖書館網(wǎng)站建設(shè)的重要性日益突出。Swiper技術(shù)因其簡單易用、擴(kuò)展性強(qiáng)、兼容性高、支持移動(dòng)端等優(yōu)點(diǎn)，在眾多網(wǎng)頁制作技術(shù)中脫穎而出。該文對Swiper的初始化參數(shù)設(shè)置和部分重要組件進(jìn)行了詳細(xì)介紹，并基于此制作了一個(gè)應(yīng)用實(shí)例，希望能為圖書館的網(wǎng)站制作提供借鑒和參考。
關(guān)鍵詞：網(wǎng)站制作；Swiper；輪播圖
1背景
隨著信息技術(shù)的發(fā)展，越來越多的圖書館開發(fā)了自己的門戶網(wǎng)站，將數(shù)字化的館藏資源和各類圖書館信息放在網(wǎng)站上展示，以更好地服務(wù)讀者。圖書館門戶網(wǎng)站是讀者獲取館藏資源和信息的重要窗口，網(wǎng)站內(nèi)容的展現(xiàn)形式和交互性會(huì)極大地影響信息傳遞的效率和用戶體驗(yàn)的效果，因此，圖書館網(wǎng)站的設(shè)計(jì)與制作顯得尤為重要。在圖書館網(wǎng)站上，如何將館內(nèi)最新通知、推薦館藏、在線展覽等內(nèi)容通過絢麗奪目的效果展示給讀者呢？——我們可以利用Swiper技術(shù)制作的輪播圖來實(shí)現(xiàn)。輪播圖是指網(wǎng)頁中一組帶有滾動(dòng)效果的圖片，能夠輪換播放，并能漸變滑動(dòng)[1]。輪播圖一般占據(jù)網(wǎng)頁黃金位置，其展示效果好壞將直接影響網(wǎng)站在用戶心中的第一印象，所以我們必須加以重視。在紛繁復(fù)雜的網(wǎng)頁制作和展示技術(shù)中，Swiper因其簡單易用、兼容性好、多終端支持等優(yōu)點(diǎn)被各大網(wǎng)站廣泛使用——今日頭條、網(wǎng)易、新浪、騰訊、優(yōu)酷、華為云、拼多多、順豐、格力、小米以及教育部等近100個(gè)國內(nèi)外各個(gè)行業(yè)領(lǐng)域的網(wǎng)站均采用了該技術(shù)。本文將對Swiper技術(shù)的使用方法進(jìn)行詳細(xì)介紹和深入探討。
2Swiper概述
2.1簡介
Swiper是一個(gè)開源而小巧的JS框架，它支持移動(dòng)終端的觸摸滑動(dòng)，如果設(shè)備支持的話，它還能夠使用終端硬件加速過渡效果。Swiper主要是面向蘋果操作系統(tǒng)的，但也支持安卓和Windows8以上的系統(tǒng)。Swiper目前已經(jīng)更新到6.1.1版，由于3.0以后的版本不再考慮對電腦端的兼容問題，所以，如果開發(fā)者想兼容IE7及之前的PC端瀏覽器，就只能選擇Swiper2.x的版本。Swiper完全開源（MITLicensed），無論在個(gè)人網(wǎng)站或商業(yè)網(wǎng)站上使用都無須付費(fèi)[2]。
2.2結(jié)構(gòu)和原理
每個(gè)Swiper實(shí)例都有一個(gè)總?cè)萜鳎╟ontainer），里面包含著封裝器（wrapper）、前進(jìn)后退按鈕控件（navigation）以及分頁器控件（pagination）等組件。其中的封裝器（wrapper）是Swiper的主體部分，其中封裝了全部的展示屏（slide），每個(gè)展示屏（slide）中可以放置圖片、文字、超鏈接等需要展示的內(nèi)容，這些展示屏可以排成一行或者多行顯示。具體如圖1所示。當(dāng)手指觸摸或鼠標(biāo)滑動(dòng)Swiper展示屏（slide）時(shí)，Swiper在瀏覽器中的每一幀，通過計(jì)算滑動(dòng)的距離差，對封裝器（wrap⁃per）進(jìn)行位移（transform）操作，從而產(chǎn)生拖動(dòng)圖片的效果。在手指或鼠標(biāo)釋放展示屏（slide）時(shí)，就會(huì)計(jì)算下一個(gè)展示屏（slide）的起始位置，同時(shí)封裝器（wrapper）設(shè)置位移動(dòng)畫（transi⁃tion），從而產(chǎn)生切換圖片的動(dòng)畫效果[3]。
3Swiper的使用方法
3.1Swiper的初始化
為了使Swiper組件正常運(yùn)行，在使用Swiper之前，我們首先要導(dǎo)入相關(guān)的CSS和JS插件，這些插件我們可以從官網(wǎng)上找到并下載，然后將下載下來的文件放入本地項(xiàng)目文件對應(yīng)的js文件夾和css文件夾中。代碼如下：<linkrel="stylesheet"href="css/swiper-bundle.min.css">//css文件<scriptsrc="js/swiper-bundle.min.js"></script>//js文件然后，我們便可以進(jìn)行初始化了：varmySwiper=newSwiper('.swiper-container',{autoplay:true,//輪播圖自動(dòng)播放，可選項(xiàng)})上面代碼中的swiper-container代表所有展示屏（slide）的容器，是必選項(xiàng)；其他屬性均為可選項(xiàng)，我們可以根據(jù)實(shí)際需要選擇不同的屬性參數(shù)。需要特別注意的是：如果我們需要在一個(gè)網(wǎng)頁中制作多個(gè)Swiper輪播圖，可以給每個(gè)Swiper輪播圖的容器（container）加上自定義的ID名稱或Class類名予以區(qū)分，但是要記得要保留swiper默認(rèn)的類名swiper-container。HTML部分的實(shí)現(xiàn)代碼如下：<divclass="swiper-container"id="swiper1">....</div><divclass="swiper-container"id="swiper2">....</div><divclass="swiper-container"id="swiper3">....</div>JS部分的代碼則需要對應(yīng)上面的id，如下所示：varswiper1=newSwiper('#swiper1');varswiper2=newSwiper('#swiper2');varswiper3=newSwiper('#swiper3');
3.2配置選項(xiàng)和組件
Swiper有很多屬性，其中最常用屬性有基礎(chǔ)參數(shù)、分頁器、前進(jìn)后退按鈕、切換效果、鼠標(biāo)/鍵盤事件、網(wǎng)格分布、回調(diào)函數(shù)等。具體參數(shù)如表1所示。Swiper的網(wǎng)格分布組件可以通過一系列參數(shù)的設(shè)置來規(guī)定輪播圖模塊中所有圖片的排列布局方式，既可以設(shè)置輪播圖中圖片顯示的行數(shù)，也可以設(shè)置每行顯示的圖片個(gè)數(shù)，如果單屏顯示多個(gè)圖片的話，還可以規(guī)定圖片之間有無間隙，以及間隙的大小。分頁器是用來為輪播圖模塊中的展示圖片添加索引的，它的默認(rèn)樣式是圓點(diǎn)型，當(dāng)然我們也可以改為分?jǐn)?shù)式或進(jìn)度條樣式，甚至可以自定義為自己喜歡的樣子。在Swiper輪播圖中，用戶既可以通過手指或鼠標(biāo)拖動(dòng)圖片來進(jìn)行圖片切換,還可以在PC端利用鼠標(biāo)或鍵盤來控制圖片切換。輪播圖中的圖片切換效果也是可以通過相應(yīng)的參數(shù)來控制的，我們既可以選擇默認(rèn)的位移切換，還可以選擇淡入淡出、立體方塊變換、3D流行進(jìn)翻轉(zhuǎn)、3D軸翻轉(zhuǎn)等豐富多彩的切換效果。此外，Swiper還有很多詳細(xì)深入的參數(shù)配置供用戶使用，通過各個(gè)參數(shù)的合理配置與搭配使用，使輪播圖達(dá)到用戶期待的效果。
4Swiper的應(yīng)用實(shí)例
那么Swiper組件在網(wǎng)站開發(fā)中如何使用呢？下面，本文將利用該組件制作一個(gè)可以自動(dòng)循環(huán)播放的輪播圖實(shí)例，用戶既可以在PC端使用鼠標(biāo)點(diǎn)擊左右箭頭和導(dǎo)航圓點(diǎn)來控制圖片切換，也可以在移動(dòng)端用手指左右滑動(dòng)圖片來實(shí)現(xiàn)圖片切換。具體效果圖如圖2所示。使用Swiper制作圖2中的輪播圖的步驟如下：步驟1：從Swiper官網(wǎng)下載最新版本的壓縮包swiper-6.1.1.zip，解壓后從中找到swiper-bundle.min.css文件和swiper-bun⁃dle.min.js文件，并分別保存到本地項(xiàng)目文件夾中的css文件夾和js文件夾中。步驟2：在html文件中引入步驟1下載的swiper-bundle.min.css文件和swiper-bundle.min.js文件，前者放在<head></head>標(biāo)簽之間，后者放在頁面尾部且在</body>標(biāo)簽之前。<!DOCTYPEhtml><html><head><!--導(dǎo)入swiper插件的css樣式壓縮文件--><linkrel="stylesheet"href="css/swiper-bundle.min.css"></head><body>...<!--導(dǎo)入swiper插件的js壓縮文件--><scriptsrc="js/swiper-bundle.min.js"></script>...</body></html>步驟3：用標(biāo)準(zhǔn)的html結(jié)構(gòu)來創(chuàng)建Swiper輪播圖的實(shí)例，并添加本地圖片信息。<!--整個(gè)輪播圖組件都封裝在swiper-container類里--><divclass="swiper-container"><!--所有輪播圖的圖片都封裝在swiper-wrapper類里--><divclass="swiper-wrapper"><divclass="swiper-slide"><ahref="#1"><imgsrc="img/1.jpg"alt=""/></a></div><divclass="swiper-slide"><ahref="#1"><imgsrc="img/2.jpg"alt=""/></a></div><divclass="swiper-slide"><ahref="#1"><imgsrc="img/3.png"alt=""/></a></div><divclass="swiper-slide"><ahref="#1"><imgsrc="img/4.jpg"alt=""/></a></div><divclass="swiper-slide"><ahref="#1"><imgsrc="img/5.jpg"alt=""/></a></div></div><!--分頁器（輪播圖中圖片底部的小圓點(diǎn)）--><divclass="swiper-pagination"></div><!--導(dǎo)航按鈕（上一頁和下一頁按鈕）--><!--上一頁按鈕）--><divclass="swiper-button-prev"></div><!--下一頁按鈕--><divclass="swiper-button-next"></div><!--滾動(dòng)條（輪播圖中圖片底部的橫線）--><!--<divclass="swiper-scrollbar"></div>--></div>步驟4：在head標(biāo)簽中添加css樣式，給Swiper輪播圖定義大小。<style>.swiper-container{width:757px;height:357px;}</style>步驟5：初始化Swiper，下面的代碼要放在body末尾標(biāo)簽</body>之前，步驟2中導(dǎo)入的js壓縮文件代碼之后。<scripttype="text/javascript">//初始化Swiper，返回初始化后的Swiper實(shí)例varmySwiper=newSwiper('.swiper-container',{//水平切換圖片還是垂直切換圖片，vertical為垂直切換，'horizontal'為水平切換direction:'horizontal',//輪播圖能否循環(huán)播放，ture為可以，false為不可以loop:true,//輪播圖能否自動(dòng)播放，ture為可以，false為不可以autoplay:true,//分頁器選項(xiàng)pagination:{//分頁器基礎(chǔ)選項(xiàng)el:'.swiper-pagination',//可點(diǎn)擊分頁器切換圖片clickable:true,},//添加前進(jìn)后退按鈕//下一頁按鈕nextEl:'.swiper-button-next',//上一頁按鈕prevEl:'.swiper-button-prev',},//添加滾動(dòng)條選項(xiàng)scrollbar:{//滾動(dòng)條基礎(chǔ)選項(xiàng)el:'.swiper-scrollbar',//滾動(dòng)條能否自動(dòng)隱藏hide:true,//用戶能否拖動(dòng)滾動(dòng)條draggable:true,},})</script>到目前為止，一個(gè)基于Swiper技術(shù)的輪播圖便制作完畢了。通過該實(shí)例的制作過程我們發(fā)現(xiàn)，用Swiper制作輪播圖非常簡捷和方便，只需四五個(gè)步驟及數(shù)個(gè)相關(guān)參數(shù)的配置，即可實(shí)現(xiàn)各種網(wǎng)站元素交互方式和網(wǎng)頁內(nèi)容展示效果。此外，Swiper制作的輪播圖還能根據(jù)終端顯示器的屏幕尺寸進(jìn)行響應(yīng)式調(diào)節(jié)，對PC、手機(jī)等都有良好的支持，功能非常強(qiáng)大。
5結(jié)束語
本文詳細(xì)介紹了Swiper技術(shù)在網(wǎng)站開發(fā)過程中所需要的初始化參數(shù)配置和部分重要組件的含義。該技術(shù)簡單好用，只需編寫少量代碼就能實(shí)現(xiàn)各種絢麗的網(wǎng)頁特效，并能支持手機(jī)、平板等終端設(shè)備的觸摸功能[4]；另外，Swiper免費(fèi)、開源的特性吸引越來越多的開發(fā)人員加入其中，開發(fā)了大量Swiper基礎(chǔ)演示實(shí)例，用戶可以在官網(wǎng)上輕松下載使用。希望此文能為圖書館網(wǎng)站制作者提供借鑒和參考，簡化門戶網(wǎng)站的制作過程，豐富內(nèi)容展示形式，提高用戶體驗(yàn)效果，增加圖書館門戶網(wǎng)站的影響力。本文對Swiper的初始化參數(shù)設(shè)置和部分重要組件進(jìn)行了詳細(xì)介紹，并基于此制作了一個(gè)應(yīng)用實(shí)例，希望能為圖書館的網(wǎng)站制作提供借鑒和參考。
作者:馬寧寧 單位:國家圖書館
