先來(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ā)。
<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 也提供類似的效果。只需要在 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"類用于創(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)容大家還可以參考專題進(jìn)行學(xué)習(xí)： 《Bootstrap學(xué)習(xí)教程》
以上就是針對(duì)javascript圖片輪播進(jìn)行的詳細(xì)介紹，希望本文對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
