網(wǎng)頁中輪播圖的實(shí)現(xiàn)方法探討

龔麗

摘要：輪播圖是指網(wǎng)頁中一些帶有滾動(dòng)效果的圖片，輪換播放及漸變滑動(dòng)。充分利用該一網(wǎng)頁效果，能夠凸顯網(wǎng)站的影響力，達(dá)到事半功倍的效果。輪播圖默認(rèn)情況下是循環(huán)向左滾動(dòng)輪播，如果單擊下方小圓點(diǎn)的話，會(huì)直接顯示所單擊的那張圖。實(shí)現(xiàn)輪播有多種方法，該文主要討論用JS腳本編程及Bootstrap框架定義的兩種方法。

關(guān)鍵詞：輪播圖；JS實(shí)現(xiàn)方法；Bootstrap框架實(shí)現(xiàn)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）31-0273-02

輪播圖是指網(wǎng)頁中一些帶有滾動(dòng)效果的圖片，輪換播放及漸變滑動(dòng)。通常是為了更好地進(jìn)行展示，比如京東首頁的滾動(dòng)廣告大圖片，充分利用這一網(wǎng)頁效果，能夠凸顯網(wǎng)站的影響力，達(dá)到事半功倍的效果。輪播圖默認(rèn)情況下是循環(huán)向左滾動(dòng)輪播，如果單擊下方小圓點(diǎn)的話，會(huì)直接顯示所單擊的那張圖。

1 輪播圖的原理

一系列的大小相等的圖片平鋪，利用CSS布局只顯示一張圖片，其余隱藏。為了實(shí)現(xiàn)輪播，可以通過Javascript編程計(jì)算偏移量并利用定時(shí)器實(shí)現(xiàn)自動(dòng)播放，或通過手動(dòng)點(diǎn)擊事件切換圖片。也可以通過jQuery或Bootstrap框架來定義輪播。

2 實(shí)現(xiàn)方法一：JS來實(shí)現(xiàn)

2.1 HTML布局

這里我們以3張圖的輪播為例，分別為3個(gè)城市的風(fēng)景圖。當(dāng)從最后一張圖切換回第一張圖時(shí)，會(huì)有較大的空白，需要利用前后兩張圖來填補(bǔ)這個(gè)空白，即實(shí)現(xiàn)無縫切換。在HTML布局的代碼中，復(fù)制最后一張圖片放置第一張圖片前，同時(shí)復(fù)制第一張圖片放置最后一張圖片的后面。

<；

>；

2.2 輪播的JS代碼

window.onload = function（） {

var container = document.getElementById（'container'）；

var list = document.getElementById（'list'）；

var buttons = document.getElementById（'buttons'）.

getElementsByTagName（'span'）；

var prev = document.getElementById（'prev'）；

var next = document.getElementById（'next'）；

var index =0；

var timer；

function animate（offset） {

//獲取的是style.left，是相對左邊獲取距離，第一張圖后style.left都為負(fù)值

var newLeft = parseInt（list.style.left） + offset；

list.style.left = newLeft + 'px'；

if （newLeft > -600） {

list.style.left = -1800 + 'px'；

}

if （newLeft < -1800） {

list.style.left = -600 + 'px'；

}}

function play（） {

//設(shè)置定時(shí)器

timer = setInterval（function（） {

next.onclick（）；

}， 2000）

}

function stop（） {

clearInterval（timer）；

}

function buttonsShow（） {

for （var i = 0； i < buttons.length； i++） {

if （buttons[i].className == "active"） {

buttons[i].className = ""；

}}

buttons[index].className = "active"；

}

prev.onclick = function（） {

index -= 1；

//判斷index的值

if （index < 0） {

index =2；

}

buttonsShow（）；

animate（600）；

}；

next.onclick = function（） {

index += 1；

if （index > 2） {

index =0；

}

animate（-600）；

buttonsShow（）；

}；

for （var i = 0； i < buttons.length； i++） {

（function（i） {

buttons[i].onclick = function（） {

var clickIndex = parseInt（this.getAttribute（'index'））；

var offset = 600 * （index - clickIndex）； //當(dāng)前圖片停留時(shí)的index

animate（offset）；

index = clickIndex； //存放鼠標(biāo)點(diǎn)擊后位置，用于小圓點(diǎn)的正常顯示

buttonsShow（）；

}

}）（i）

}

container.onmouseover = stop； //鼠標(biāo)懸停則停止自動(dòng)輪播

container.onmouseout = play； //鼠標(biāo)離開則繼續(xù)輪播

play（）；

}

3 實(shí)現(xiàn)方法二：Bootstrap框架來實(shí)現(xiàn)

Bootstrap是一個(gè)基于HTML5和CSS3的前端開發(fā)框架，它提供了較為豐富的web組件，能夠快速地搭建一個(gè)漂亮、功能完備的網(wǎng)站和管理系統(tǒng)。同時(shí)Bootstrap也提供較為豐富的jQuery插件。在使用Bootstrap時(shí)，需要在頁面中引用Bootstrap.css樣式，如果要使用到相應(yīng)的組件，還要引入jQuery.js以及Bootstrap.js文件。jQuery.js必須在Bootstrap.js文件之前引入，因?yàn)樵贐ootstrap中插件是以jQuery為基礎(chǔ)的，而瀏覽器中js是順序加載解析的。

3.1 Bootstrap框架引入

在標(biāo)記中引入css文件，代碼如下：

在標(biāo)記中引入js文件，代碼如下：

3.2 輪播圖實(shí)現(xiàn)代碼

//輪播圖的計(jì)數(shù)器，即圓圈指示符

//設(shè)置輪播圖片

//圖片文字

New York

Chicago

LA

//左右控制器

兩種方法效果類似，運(yùn)行如下圖（3張圖依次輪播）：

4 結(jié)束語

除了以上探討的兩種方法，用jQuery來實(shí)現(xiàn)輪播也非常常見。Web前端開發(fā)的三個(gè)基本要素仍然是：HTML、CSS和JavaScript，但“會(huì)做網(wǎng)頁”不等于“前端開發(fā)”，前端開發(fā)是寫代碼的，是用代碼來構(gòu)建網(wǎng)頁界面和交互，終極階段是Note.js全棧開發(fā)。

前端開發(fā)的入門門檻相對較低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。另一方面，從就業(yè)角度來說，前端開發(fā)是個(gè)非常新的職業(yè)，對一些規(guī)范還處于探索階段。目前總有新的靈感和技術(shù)不時(shí)閃現(xiàn)出來，各種JavaScript框架層出不窮，比較主流的例如react 和 vue等，但JS仍然是最重要的組成部分。

參考文獻(xiàn)：

[1] 徐濤. 深入理解Bootstrap[M]. 北京： 機(jī)械工業(yè)出版社， 2015： 264-270.

[2] 賀臣， 陳鵬. Bootstrap基礎(chǔ)教程[M]. 北京： 電子工業(yè)出版社， 2016： 209-215.

[3] 劉彥佐. 手把手原生js簡單輪播圖[EB/OL].http：//www.cnblogs.com/LIUYANZUO/p/5679753.html.