龔麗

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

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

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2017）31-0273-02

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

1 輪播圖的原理

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

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

2.1 HTML布局

這里我們以3張圖的輪播為例，分別為3個城市的風(fēng)景圖。當從最后一張圖切換回第一張圖時，會有較大的空白，需要利用前后兩張圖來填補這個空白，即實現(xiàn)無縫切換。在HTML布局的代碼中，復(fù)制最后一張圖片放置第一張圖片前，同時復(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都為負值

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è)置定時器

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）； //當前圖片停留時的index

animate（offset）；

index = clickIndex； //存放鼠標點擊后位置，用于小圓點的正常顯示

buttonsShow（）；

}

}）（i）

}

container.onmouseover = stop； //鼠標懸停則停止自動輪播

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

play（）；

}

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

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

3.1 Bootstrap框架引入

在標記中引入css文件，代碼如下：

在標記中引入js文件，代碼如下：

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

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

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

//圖片文字

New York

Chicago

LA

//左右控制器

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

4 結(jié)束語

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

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

參考文獻：

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

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

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