先來看看Bootstrap圖片輪播效果：
上面就是為大家分享的效果，不過這是網易云音樂的首頁。
這樣的效果記得最先在ios7的官方控件庫中出現之後安卓也在某個版本加入了這個view，設計是通用的啊..bootstrap3也支持在web中使用這樣的效果。
接下來進行簡單分析：
一. 結構分析
一個輪播圖片主要包括三個部分：
☑ 輪播的圖片
☑ 輪播圖片的計數器
☑ 輪播圖片的控制器
第一步：設計輪播圖片的容器。在Bootstrap 框架中採用carousel 樣式，並且給這個容器定義一個ID 值，方便後面採用data 屬性來聲明觸發。
複製代碼代碼如下:<div id="slidershow"></div>
第二步：設計輪播圖片計數器。在容器div.carousel 的內部添加輪播圖片計算器，採用carousel-indicators 樣式，其主要功能是顯示當前圖片的播放順序(有幾張圖片就放置幾個li)，一般採用有順列表來製作：
<div id="slidershow"><!-- 設置圖片輪播的順序--> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ol></div>
第三步：設計輪播圖片播放區。輪播圖整個效果中，播放區是最關鍵的一個區域，這個區域主要用來放置需要輪播的圖片。這個區域使用carousel-inner 樣式來控制，而且其同樣放置在carousel 容器內，並且通過item 容器來放置每張輪播的圖片：
<div id="slidershow"> <!-- 設置圖片輪播的順序--> <ol> <li>1</li> … </ol> <!-- 設置輪播圖片--> <div> <div> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"></a> </div> <div> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"></a> </div> … <div> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"></a> </div> </div></div>
第四步:設置輪播圖片描述.很多輪播圖片效果，在每個圖片上還對應有自己的標題和描述內容。其實Bootstrap 框架中的Carousel 也提供類似的效果。只需要在item 中圖片底部添加對應的代碼.
<div id="slidershow"> <!-- 設置圖片輪播的順序--> <ol> <li>1</li> … </ol> <!-- 設置輪播圖片--> <div> <div> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"></a> <!-- 圖片對應標題和描述內容--> <div> <h3>圖片標題</h3> <p>描述內容...</p> </div> </div> … </div></div>
第五步：設計輪播圖片控制器。很多時候輪播圖片還具有一個向前播放和向後播放的控制器。在Carousel 中通過carousel-control樣式配合left 和right 來實現。其中left表示向前播放，right表示向後播放。其同樣放在carousel容器內：
<div id="slidershow"> <!-- 設置圖片輪播的順序--> <ol> … </ol> <!-- 設置輪播圖片--> <div> … </div> <!-- 設置輪播圖片控制器--> <a href="" > <span></span> </a> <a href=""> <span></span> </a> </div>
二、實現過程
<div id="carousel-example-generic" data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></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 role="listbox"> <div> <img src="..."> <div> ... </div> </div> <div> <img src="..."> <div> ... </div> </div> ... </div> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> <span>Next</span> </a></div>
分為三個部分
1、指示器
一個部分是下面的小點..就是指示器
ol類用於創建這個指示器
每個里data-slide-to="0" 屬性用於指引位置定義默認激活狀態
item
<div> <img src="..."> <div> <h3>...</h3> <p>...</p> </div></div>
沒啥懸念就是每一個項目，填充圖片題目和內容就好
2、左右控制器
代碼如下
<a href="#myCarousel" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a>
在javascript中操作
初始化
$('.carousel').carousel({ interval: 2000})進行循環
.carousel('cycle')
暫停
.carousel('pause')
定位到具體某一個item 從0開始
.carousel(number)
前一個
.carousel('prev')
下一個
.carousel('next')
關於Bootstrap的更多內容大家還可以參考專題進行學習： 《Bootstrap學習教程》
以上就是針對javascript圖片輪播進行的詳細介紹，希望本文對大家學習javascript程序設計有所幫助。