Bootstrap開發(fā)實戰(zhàn)之響應式輪播圖

更新時間：2016年06月02日 09:24:21 作者：水之原

這篇文章主要為大家詳細介紹了Bootstrap開發(fā)實戰(zhàn)之響應式輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文主要內(nèi)容是在導航條的下方做一張輪播圖，自動播放最新的重要動態(tài)，供大家參考，具體內(nèi)容如下

一、響應式輪播圖

//響應式輪播圖

<div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0"
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active" style="background:#223240;">
 <a href="#"><img src="img/slide1.png" alt="第一張"></a>
 </div>
 <div class="item" style="background:#F5E4DC;">
 <a href="#"><img src="img/slide2.png" alt="第二張"></a>
 </div>
 <div class="item" style="background:#DE2A2D;">
 <a href="#"><img src="img/slide3.png" alt="第三張"></a>
 </div>
 </div>
 <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">&lsaquo;</a>
 <a href="#myCarousel" data-slide="next" class="carousel-controlright">&rsaquo;</a>
</div>

//所需要的 jQuery 控制

$('#myCarousel').carousel({
 //設置自動播放/2 秒
 interval : 3000,
});

//調(diào)整輪播器箭頭位置

$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px');
$(window).resize(function() {
 var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height();
 $('.carousel-control').css('line-height', $height + 'px');
});

//所需要的 CSS

a:focus {
 outline: none;
}
.navbar-brand {
 padding: 0;
}
#myCarousel {
 margin: 50px 0 0 0;
}
.carousel-inner .item img {
 margin: 0 auto;
}
.carousel-control {
 font-size: 100px;
}

如果大家還想深入學習，可以點擊這里進行學習，再為大家附一個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript中call和apply方法的區(qū)別實例分析
這篇文章主要介紹了JavaScript中call和apply方法的區(qū)別,結(jié)合實例形式分析call和apply方法的功能、原理及相關使用操作區(qū)別,需要的朋友可以參考下
2018-08-08
js 文本滾動效果的實例代碼
一個簡單的滾動效果，我只測試了文本，對于圖片有需要的朋友可以測試一下哦
2013-08-08
JavaScript性能優(yōu)化創(chuàng)建文檔碎片(document.createDocumentFragment)
講這個方法之前，我們應該先了解下插入節(jié)點時瀏覽器會做什么。
2010-07-07
JavaScript讀寫二進制數(shù)據(jù)的方法詳解
avascript里有兩個內(nèi)置對象，一個是ArrayBuffer；一個是DataView，讀寫二進制數(shù)據(jù)都需要使用這兩個對象。這篇文章主要給大家介紹了關于JavaScript讀寫二進制數(shù)據(jù)的方法，需要的朋友可以參考下
2018-09-09
詳解JavaScript如何實現(xiàn)異步并發(fā)任務控制器
實現(xiàn)一個控制并發(fā)數(shù)的任務隊列?、實現(xiàn)一個異步并發(fā)任務控制器，這已經(jīng)是非常經(jīng)典的手寫題目了，因為其中涉及?異步?和?并發(fā)?的內(nèi)容，所以本文就來講講到底如何實現(xiàn)呢
2023-05-05
使用JavaScript實現(xiàn)node.js中的path.join方法
Node.JS中的 path.join 非常方便，能直接按相對或絕對合并路徑，有時侯前端也需要這種方法，如何實現(xiàn)呢？感興趣的朋友跟隨腳本之家小編一起看看吧
2018-08-08
js 與或運算符 || && 妙用
js 與或運算符 || && 妙用，可用于精簡代碼，降低程序的可讀性。
2009-12-12
JS實現(xiàn)動態(tài)生成html table表格的方法分析
這篇文章主要介紹了JS實現(xiàn)動態(tài)生成html table表格的方法,結(jié)合實例形式分析了javascript針對數(shù)組數(shù)據(jù)的讀取、遍歷以及動態(tài)生成相關操作技巧,需要的朋友可以參考下
2018-07-07
基于javascript實現(xiàn)圖片懶加載
這篇文章主要介紹了javascript實現(xiàn)圖片懶加載的方法及思路，有時我們需要用懶加載，也就是延遲加載圖片的方式，來提高網(wǎng)站的親和力,需要的朋友可以參考下
2016-01-01
JS點擊某個圖標或按鈕彈出文件選擇框的實現(xiàn)代碼
本文給大家介紹js點擊點擊某個圖標或按鈕彈出文件選擇框的實現(xiàn)代碼，代碼簡單易懂，非常不錯，感興趣的朋友可以參考下
2016-09-09