bootstrap圖片輪播組件使用實例解析_javascript技巧

《bootstrap圖片輪播組件使用實例解析_javascript技巧》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、Bootstrap圖片輪播組件使用實例解析使用Bootstrap來編寫圖片輪播組件Carousel，則能夠節(jié)約很多時間，圖片輪播組件是一個在網(wǎng)頁中很常見的技術(shù)，但是如果直接編寫的話，需耍很長的JavaScript編碼，同時也不好控制大小。同時說一下，Carousel這個詞的本義是回旋木馬。一、基本目標在網(wǎng)頁編寫多張圖片的輪播組件Carousel,鼠標放在上面自帶懸停效果，并口在每張圖片下面配有圖片說明。出于筆者的電腦視頻錄制軟件比較渣，也覺得沒必要畫太多吋間在這上面，覺得只要能說明問題就行，所以卜?面的GIF失色比較嚴重，但是基木的效

2、果還算是展小出來了。這個Bootstrap的圖片輪播組件Carousel,不兼容IE6與7,需要IE6支持的話,要去這個網(wǎng)站中下載Bootstrap的IE6組件支持（點擊打開鏈接）。同吋，在GoogleChrome中圖片文件說明會滲有一點小黑色，不過不影響瀏覽：圖片輪播Carousel在不同瀏覽器小的展示情況是不同的。IE8的話是這樣的效果:圖片輪播Carousel二、基本思想見下圖網(wǎng)頁布局:圖片輪播Carousel"曲三、制作過程1、同Z前紐ootstrap編寫一個在當前網(wǎng)頁彈出可關(guān)閉的對話框非彈窗》的第一步（點擊打開鏈接）因為需要

3、使用Bootstrap,所以先在官網(wǎng)（點擊打開鏈接）下載組件即可，用于生產(chǎn)環(huán)境的Bootstrap版本，Bootstrap3對2并不兼容，建議直接根據(jù)其開發(fā)文檔使用Bootstrap3o本文也是根據(jù)Bootstrap3制作。同時，Bootstrap3所提供的JavaScript效果需要到jQueryl.11（點擊打開鏈接）支持,可以到jQuery官網(wǎng)中下載兼容舊瀏覽器TE6的jQueryl.11,而不是不兼容舊瀏覽器TE6的JQuery2o下載完之后，配置好站點目錄。把Bootstrap3直接解壓到站點目錄，而把jqucry-1.11

4、.1.js放到js目錄,也就是與bootstrap,js同一目錄,站點文件夾的結(jié)構(gòu)大致如下：fonts均bootstrapjsimages它bootstrap.minjsJijs均jquery-l.ll.ljsBootstrapTest2014/6/269:142014/6/269:142014/10/2915:41JScriptScript文件JScriptScript文件JScriptScript文件2、以下是網(wǎng)頁的全代碼，下而一部分一部分進行說明:

5、ansitional//EN，z〃http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6、o〃>〈linkhref二〃css/bootstrap.css〃rel二〃stylesheet"media二〃screen〃>〈/script>

7、der"〉圖片輪播Carousel