• 
    

    
    

      99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看 ?

      網(wǎng)頁中簡易輪播圖案例解析

      2021-10-21 02:15:56
      信息記錄材料 2021年9期
      關鍵詞:指示器調(diào)用網(wǎng)頁

      張 穎

      (揚州高等職業(yè)技術學校 江蘇 揚州 225003)

      1 引言

      在一個網(wǎng)站的首頁,通常會留有一片位置來凸顯網(wǎng)站的動態(tài),這片區(qū)域常常采用多張圖片切換的效果,這就是輪播圖。輪播圖也叫首頁焦點圖,無論是大型購物網(wǎng)站,還是政府網(wǎng)站、教育網(wǎng)站、新聞網(wǎng)站[1-2],輪播圖幾乎成了所有網(wǎng)站的標配,也是網(wǎng)站的一大看點和亮點。

      輪播在默認情況下是循環(huán)向右輪播,在圖片區(qū)的左右兩側一般會放兩個按鈕[3],用戶可以點擊左右按鈕來切換圖片,圖片區(qū)下方一般還會放幾個與大圖對應的圓點、短線、數(shù)字圓圈、縮略圖等,如果點擊某個指示器,會直接跳轉到所單擊的那張輪播圖,并且圖片標題也會同時跳轉。輪播圖內(nèi)容可以是圖像、內(nèi)嵌框架、視頻或者其他任何類型的內(nèi)容。

      如何高效便捷地設計輪播圖的HTML結構、進行樣式排版以及使用JavaScript控制輪播行為及交互,成了前端工程師的基本功。本文旨在對簡易網(wǎng)頁輪播圖案例進行解析,理解通過CSS樣式及JavaScript實現(xiàn)自動輪播、輪播控制的方法,熟悉前端頁面開發(fā)的過程[4]。

      2 輪播圖設計思路

      通過HTML布局將要展示的圖片全部放在盒子里,在CSS文件中設置網(wǎng)頁元素的顯示、隱藏等格式,然后通過JavaScript代碼動態(tài)更新網(wǎng)頁元素的顯示隱藏格式等,使得輪播圖展示區(qū)只顯示其中的一張圖片,而將其余的圖片隱藏。為了實現(xiàn)輪播效果,可以通過JavaScript中的setInterval()方法間歇調(diào)用指定的翻頁代碼來實現(xiàn)自動翻頁。輪播效果見圖1。

      圖1 輪播效果圖

      3 實現(xiàn)代碼的解析

      3.1 編寫HTML布局頁面

      頁面采用div布局,body標簽中包括以下幾點。

      (1)5張輪播的圖片,圖片可多于5張,這里添加就可以了,但是建議輪播圖片不要太多,為了讓圖片顯示效果達到最佳,圖片的大小最好統(tǒng)一。

      (2)用

    1. 標簽定義列表項來制作輪播圖底部指示器。

      (3)用一對尖括號制作輪播圖左右導航控制鏈接。

      body標簽內(nèi)的主體布局代碼見圖2。

      圖2 HTML代碼主體截圖

      3.2 輪播效果的實現(xiàn)過程

      3.2.1 CSS文件中的主要格式設置

      (1)設置圖片隱藏和顯示。display:none;語句設置當前元素不顯示,display:block;語句設置當前元素顯示為塊級元素。

      (2)設置底部指示器位置。

      (3)設置底部指示器格式。

      (4)設置選中指示器填充為白色。

      3.2.2 JavaScript文件主要代碼

      (1)獲取網(wǎng)頁元素,包括圖片、指示器、左右導航控制。

      (2)初始化。第1張圖片顯示,對應的指示器高亮。此處"item active"是多類選擇器。要注意的是:如果這兩個類選擇器中有相同的屬性,根據(jù)瀏覽器的解析順序,則該屬性的值按照CSS文件中出現(xiàn)的順序,以最后一個選擇器中的屬性值為準。與應用類時類名書寫的先后順序無關,比如這里的"item active"也可以寫成"active item"。

      (3)輪播函數(shù)。主要功能可以概況為:①設置所有圖片隱藏、所有底部指示器不高亮,這部分功能主要是由for循環(huán)實現(xiàn)的,并記錄當前位置;②設置當前被選中圖片顯示、所有底部指示器高亮,由slide函數(shù)中最后兩行語句實現(xiàn)的;③當指示器單擊事件被觸發(fā)時,如果單擊的是當前位置則跳出輪播函數(shù),單擊的不是當前位置的話,記錄當前位置并調(diào)用輪播函數(shù)。

      (4)對導航控制左鏈接綁定單擊事件,實現(xiàn)圖片的后退顯示。當輪播到第1張圖片的時候,轉到輪播最后一張圖片。current == -1時,本例中將current 賦值為4,即輪播組圖中的最后一張圖片,再循環(huán)向左輪播。

      (5)對導航控制右鏈接綁定單擊事件,實現(xiàn)圖片的前進顯示,當輪播到最后一張圖片的時候,轉到輪播第1張圖片。current == indicatorsLists.length時,一共5張圖片,當前current =5,此時將current 賦值為0,即輪播組圖中的第1張圖片,再循環(huán)向右輪播。

      (6)輪播開始。此處借助setInterval() 方法,每間隔3s調(diào)用1次controlRight.onclick方法,實現(xiàn)圖片的輪播效果,讓圖片自動向右滑動。setInterval() 方法可按照指定的周期(以ms計)來調(diào)用函數(shù),在不加干預的情況下,間歇調(diào)用將會一直執(zhí)行到頁面卸載,直到 clearInterval() 被調(diào)用或窗口被關閉。

      (7)鼠標移入到導航控制鏈接上時停止輪播。clearInterval(timer);語句停止輪播開始處的setInterval() 方法的調(diào)用。opacity屬性設置左右導航控制鏈接透明度為1,即顯示。

      (8)鼠標移出導航控制鏈接上時,timer = setInterval(controlRight.onclick, 3000);實現(xiàn)恢復輪播。同時,鼠標一次導航控制鏈接時,左右導航鏈接(即一對尖括號)不顯示。

      4 結語

      輪播圖的實現(xiàn)方法很多,圖片滑動過程中也可以加入淡入淡出、緩沖等更加優(yōu)化的視覺效果,這些可以再優(yōu)化CSS的格式設置。本文主要對使用JavaScript中的循環(huán)定時器實現(xiàn)了圖像輪播無縫銜接的代碼進行解析,希望能夠為網(wǎng)站開發(fā)人員制作輪播圖提供借鑒。

      猜你喜歡
      指示器調(diào)用網(wǎng)頁
      核電項目物項調(diào)用管理的應用研究
      LabWindows/CVI下基于ActiveX技術的Excel調(diào)用
      測控技術(2018年5期)2018-12-09 09:04:46
      基于CSS的網(wǎng)頁導航欄的設計
      電子制作(2018年10期)2018-08-04 03:24:38
      基于URL和網(wǎng)頁類型的網(wǎng)頁信息采集研究
      電子制作(2017年2期)2017-05-17 03:54:56
      基于系統(tǒng)調(diào)用的惡意軟件檢測技術研究
      柴油機儀表指示器的維修保養(yǎng)
      網(wǎng)頁制作在英語教學中的應用
      電子測試(2015年18期)2016-01-14 01:22:58
      接地故障指示器的10kV線路接地故障的判斷與分析研究
      基于非接觸式電流互感器取電的故障指示器設計
      10個必知的網(wǎng)頁設計術語
    2. 德钦县| 青川县| 呈贡县| 崇信县| 蒲江县| 肥乡县| 阳原县| 佛冈县| 犍为县| 高青县| 霞浦县| 福海县| 定兴县| 灯塔市| 江津市| 得荣县| 黎城县| 名山县| 府谷县| 安乡县| 清流县| 株洲市| 张家口市| 灵山县| 朔州市| 台中市| 和平区| 和龙市| 武义县| 云林县| 二连浩特市| 湘乡市| 密云县| 奉节县| 利辛县| 屏东县| 大荔县| 博野县| 玛沁县| 鄢陵县| 乌鲁木齐县|