bootstrap實現(xiàn)每隔5秒自動輪播效果
更新時間：2016年12月20日 16:29:38 投稿：lijiao
這篇文章主要介紹了bootstrap實現(xiàn)每隔5秒自動輪播效果，可以自己設置輪播間隔時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了bootstrap輪播的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<title>輪播</title>
<link rel="stylesheet" >
<style>
#circleContent{
width:150px;
height:150px;
}
</style>
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#circleContent').carousel({interval:5000});//每隔5秒自動輪播
});
</script>
</head>
<body>
<div id="circleContent" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#circleContent" data-slide-to="0" class="active"></li>
<li data-target="#circleContent" data-slide-to="1"></li>
<li data-target="#circleContent" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/circle1.png">
<div class="carousel-caption">IMG1</div>
</div>
<div class="item">
<img src="images/circle2.png">
<div class="carousel-caption">IMG2</div>
</div>
<div class="item">
<img src="images/circle3.png">
<div class="carousel-caption">IMG3</div>
</div>
</div>
<a class="carousel-control left" href="#circleContent" data-slide="prevent">‹</a>
<a class="carousel-control right" href="#circleContent" data-slide="next">›</a>
</div>
</body>
</html>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附4個精彩的專題：
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式：var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別，下面腳本之家小編給大家詳細介紹下js中const、var和let的區(qū)別，感興趣的朋友一起看看吧2016-10-10
JS循環(huán)遍歷JSON數(shù)據(jù)的方法
這篇文章主要介紹了JS 循環(huán)遍歷JSON數(shù)據(jù)的方法,需要的朋友可以參考下2014-07-07
解決JSON.stringify()自動將中文轉譯成unicode的問題
下面小編就為大家分享一篇解決JSON.stringify()自動將中文轉譯成unicode的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了javascript實現(xiàn)全角半角檢測的方法,涉及javascript針對字符遍歷與檢測的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JS邏輯判斷選擇器 || &&，下面我們來一起學習吧2019-05-05
JS中使用new Option()實現(xiàn)時間聯(lián)動效果
這篇文章主要介紹了JS中使用new Option()實現(xiàn)時間聯(lián)動效果,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)打字游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了基于純JS實現(xiàn)多張圖片的懶加載Lazy過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了微信小程序項目實踐之主頁tab選項實現(xiàn),本文通過實例代碼相結合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了js實現(xiàn)兩點之間畫線的方法,涉及javascript圖形繪制的相關技巧,需要的朋友可以參考下2015-05-05