bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果
更新時(shí)間：2016年12月20日 16:29:38 投稿：lijiao
這篇文章主要介紹了bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果，可以自己設(shè)置輪播間隔時(shí)間，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap輪播的具體代碼，供大家參考，具體內(nèi)容如下
<!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秒自動(dòng)輪播
});
</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>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附4個(gè)精彩的專題：
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式：var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別，下面腳本之家小編給大家詳細(xì)介紹下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()自動(dòng)將中文轉(zhuǎn)譯成unicode的問(wèn)題
下面小編就為大家分享一篇解決JSON.stringify()自動(dòng)將中文轉(zhuǎn)譯成unicode的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
javascript實(shí)現(xiàn)全角半角檢測(cè)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全角半角檢測(cè)的方法,涉及javascript針對(duì)字符遍歷與檢測(cè)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JS邏輯判斷選擇器 || &&，下面我們來(lái)一起學(xué)習(xí)吧2019-05-05
JS中使用new Option()實(shí)現(xiàn)時(shí)間聯(lián)動(dòng)效果
這篇文章主要介紹了JS中使用new Option()實(shí)現(xiàn)時(shí)間聯(lián)動(dòng)效果,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)打字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
基于純JS實(shí)現(xiàn)多張圖片的懶加載Lazy過(guò)程解析
這篇文章主要介紹了基于純JS實(shí)現(xiàn)多張圖片的懶加載Lazy過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
微信小程序項(xiàng)目實(shí)踐之主頁(yè)tab選項(xiàng)實(shí)現(xiàn)
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之主頁(yè)tab選項(xiàng)實(shí)現(xiàn),本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-07-07
js實(shí)現(xiàn)兩點(diǎn)之間畫線的方法
這篇文章主要介紹了js實(shí)現(xiàn)兩點(diǎn)之間畫線的方法,涉及javascript圖形繪制的相關(guān)技巧,需要的朋友可以參考下2015-05-05