Bootstrap3制作圖片輪播效果
先來(lái)看看Bootstrap圖片輪播效果：
上面就是為大家分享的效果，不過(guò)這是網(wǎng)易云音樂(lè)的首頁(yè)。
這樣的效果記得最先在ios7的官方控件庫(kù)中出現(xiàn)之后安卓也在某個(gè)版本加入了這個(gè)view，設(shè)計(jì)是通用的啊..bootstrap3也支持在web中使用這樣的效果。
接下來(lái)進(jìn)行簡(jiǎn)單分析：
一 . 結(jié)構(gòu)分析
一個(gè)輪播圖片主要包括三個(gè)部分：
☑ 輪播的圖片
☑ 輪播圖片的計(jì)數(shù)器
☑ 輪播圖片的控制器
第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個(gè)容器定義一個(gè) ID 值，方便后面采用 data 屬性來(lái)聲明觸發(fā)。
第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 div.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個(gè)li)，一般采用有順列表來(lái)制作：
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ol> </div>
第三步：設(shè)計(jì)輪播圖片播放區(qū)。輪播圖整個(gè)效果中，播放區(qū)是最關(guān)鍵的一個(gè)區(qū)域，這個(gè)區(qū)域主要用來(lái)放置需要輪播的圖片。這個(gè)區(qū)域使用 carousel-inner 樣式來(lái)控制，而且其同樣放置在 carousel 容器內(nèi)，并且通過(guò) item 容器來(lái)放置每張輪播的圖片：
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> </div> … <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> </div> </div> </div>
第四步:設(shè)置輪播圖片描述.很多輪播圖片效果，在每個(gè)圖片上還對(duì)應(yīng)有自己的標(biāo)題和描述內(nèi)容。其實(shí) Bootstrap 框架中的 Carousel 也提供類(lèi)似的效果。只需要在 item 中圖片底部添加對(duì)應(yīng)的代碼.
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <!-- 圖片對(duì)應(yīng)標(biāo)題和描述內(nèi)容 --> <div class="carousel-caption"> <h3>圖片標(biāo)題</h3> <p>描述內(nèi)容...</p> </div> </div> … </div> </div>
第五步：設(shè)計(jì)輪播圖片控制器。很多時(shí)候輪播圖片還具有一個(gè)向前播放和向后播放的控制器。在 Carousel 中通過(guò) carousel-control樣式配合 left 和 right 來(lái)實(shí)現(xiàn)。其中l(wèi)eft表示向前播放，right表示向后播放。其同樣放在carousel容器內(nèi)：
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> … </div> <!-- 設(shè)置輪播圖片控制器 --> <a class="left carousel-control" href="" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href=""> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
二、實(shí)現(xiàn)過(guò)程
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
分為三個(gè)部分
1、指示器
一個(gè)部分是下面的小點(diǎn)..就是指示器
ol class="carousel-indicators"類(lèi)用于創(chuàng)建這個(gè)指示器
每個(gè)里data-slide-to="0" 屬性用于指引位置 class="active" 定義默認(rèn)激活狀態(tài)
item
<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
沒(méi)啥懸念 就是每一個(gè)項(xiàng)目，填充圖片 題目 和 內(nèi)容 就好
2、左右控制器
代碼如下
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
在javascript中操作
初始化
$('.carousel').carousel({
interval: 2000
})
進(jìn)行循環(huán)
.carousel('cycle')
暫停
.carousel('pause')
定位到具體某一個(gè)item 從0開(kāi)始
.carousel(number)
前一個(gè)
.carousel('prev')
下一個(gè)
.carousel('next')
關(guān)于Bootstrap的更多內(nèi)容大家還可以參考專(zhuān)題進(jìn)行學(xué)習(xí)： 《Bootstrap學(xué)習(xí)教程》
以上就是針對(duì)javascript圖片輪播進(jìn)行的詳細(xì)介紹，希望本文對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了前端深入理解Typescript泛型概念，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要來(lái)和大家討論一下typescript中一些奇怪的賦值語(yǔ)句,探索其背后原因,更深入的了解typescript作為一個(gè)結(jié)構(gòu)化系統(tǒng)的特性,感興趣的可以了解下2024-02-02
JS實(shí)現(xiàn)加載和讀取XML文件的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)加載和讀取XML文件的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)xml文件的加載與讀取相關(guān)實(shí)現(xiàn)步驟與操作技巧,需要的朋友可以參考下2017-04-04
threejs使用JSON格式保存和加載整個(gè)場(chǎng)景分析
本文介紹了如何使用Three.js將三維場(chǎng)景保存為JSON格式,并加載整個(gè)場(chǎng)景,通過(guò)調(diào)用各個(gè)對(duì)象的.toJSON()方法,可以保存和加載立方體、球體、obj、glb等三維模型的頂點(diǎn)和材質(zhì)數(shù)據(jù),文章詳細(xì)講解了實(shí)現(xiàn)思路和代碼樣例,一起看看吧2024-11-11
使用sql.js實(shí)現(xiàn)前端SQLite數(shù)據(jù)庫(kù)操作
sql.js?是將?SQLite?數(shù)據(jù)庫(kù)編譯為?JavaScript?的庫(kù),允許開(kāi)發(fā)者在瀏覽器環(huán)境中直接操作?SQLite?數(shù)據(jù)庫(kù),本文主要介紹了如何使用sql.js實(shí)現(xiàn)多張表的關(guān)聯(lián)操作,需要的可以了解下2024-12-12
echarts報(bào)錯(cuò):Error?in?mounted?hook的解決方法
最近又遇到了寫(xiě)echarts的時(shí)候常遇到的一個(gè)錯(cuò)誤,這篇文章主要給大家介紹了關(guān)于echarts報(bào)錯(cuò):Error?in?mounted?hook:?“TypeError:?Cannot?read?properties?of?undefined?(reading?‘init‘)“的解決方法,需要的朋友可以參考下2022-07-07
使用bat打開(kāi)多個(gè)cmd窗口執(zhí)行g(shù)ulp、node
本文主要介紹了使用bat打開(kāi)多個(gè)cmd窗口執(zhí)行g(shù)ulp、node的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
XML是一種標(biāo)記語(yǔ)言,用于存儲(chǔ)和傳輸數(shù)據(jù),它是從SGML簡(jiǎn)化而來(lái)的,XML經(jīng)常被用來(lái)在不同的應(yīng)用程序之間或同一個(gè)應(yīng)用程序的不同部分之間交換數(shù)據(jù),同時(shí)還可以用于網(wǎng)絡(luò)應(yīng)用的數(shù)據(jù)配置和信息存儲(chǔ),在JavaScript中,通常有幾種方法,需要的朋友可以參考下2025-01-01![有關(guān)JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關(guān)系](http://img.jbzj.com/images/xgimg/bcimg8.png)
有關(guān)JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關(guān)系
這篇文章主要介紹了有關(guān)JS中的0,null,undefined,[],{},'',false之間的關(guān)系,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了js分頁(yè)工具及其具體用法,包括js與css的詳細(xì)實(shí)現(xiàn)代碼與使用方法,需要的朋友可以參考下2015-01-01