在本教程中,您将看到如何使用 Bootstrap 创建轮播。这将帮您创建内容滑块,图像画廊等等。
< div id = "myCarousel" class = "carousel slide" > <!-- Carousel items --> < div class = "carousel-inner" > < div class = "active item" >…</ div > < div class = "item" >…</ div > < div class = "item" >…</ div > </ div > <!-- Carousel nav --> < a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" >‹</ a > < a class = "carousel-control right" href = "#myCarousel" data-slide = "next" >›</ a > </ div > |
所以,您把想要呈现的条目(比如 images)以循环顺序放置在 "carousel-inner" div 中,通过 "<!-- Carousel nav -->" 创建条目的导航。它使用定制的 data 属性 "data-slide" 来导航到上一个和下一个条目。
您必须在您要创建轮播的 HTML 文件引用 jquery.js 和 bootstrap-carousel.js 文件。
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < title >Bootstrap 带有 next 和 previous 的翻页实例</ title > < meta name = "description" content = "Twitter Bootstrap pager with next and previous example" > < link href = "/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel = "stylesheet" > < style type = "text/css" > body { margin: 50px; } </ style > </ head > < body > < ul class = "pager" > < li > < a href = "#" >Previous</ a > </ li > < li > < a href = "#" >Next</ a > </ li > </ ul > </ body > </ html > |
< div class = "navbar navbar-fixed-top" > < div class = "navbar-inner" > < div class = "container" > < a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" > < span class = "icon-bar" ></ span > < span class = "icon-bar" ></ span > < span class = "icon-bar" ></ span > </ a > < a class = "brand" href = "#" >< img src = "/images/w3r.png" width = "111" height = "30" alt = "w3resource logo" /></ a > < div class = "nav-collapse" > < ul class = "nav" > < li class = "active" >< a href = "#" >Home</ a ></ li > < li >< a href = "#about" >About</ a ></ li > < li >< a href = "#contact" >Contact</ a ></ li > </ ul > </ div > <!--/.nav-collapse --> </ div > </ div > </ div > < div class = "container" > <!-- Example row of columns --> < div class = "row" > < div class = "span4" > < h2 >HTML5 and JS Apps</ h2 > < p > </ p > < div id = "myCarousel" class = "carousel slide" > <!-- Carousel items --> < div class = "carousel-inner" > < div class = "active item" >< img src = "/update-images/html5_logo.png" alt = "HTML5 logo" width = "500" height = "99" /></ div > < div class = "item" >< img src = "/update-images/javascript-logo.png" alt = "JS logo" width = "500" height = "99" /></ div > < div class = "item" >< img src = "/update-images/schema.png" alt = "Schema.org logo" width = "500" height = "99" /></ div > < div class = "item" >< img src = "/update-images/json.gif" alt = "JSON logo" width = "500" height = "99" /></ div > </ div > <!-- Carousel nav --> < a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" >‹</ a > < a class = "carousel-control right" href = "#myCarousel" data-slide = "next" >›</ a > </ div > </ div > </ div > < hr > < footer > < p >© Company 2012</ p > </ footer > </ div > <!-- /container --> <!-- Le javascript ================================================== --> <!-- 放置在文档的页面底部加快加载速度 --> < script src = "twitter-bootstrap-v2/docs/assets/js/jquery.js" ></ script > < script src = "twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js" ></ script > |
您可以使用下面的 JavaScript 代码来创建轮播。
$('.carousel').carousel() |
下面是您可以使用的选项
下面是您可以使用的轮播方法
$('.carousel').carousel({ interval: 2000 // in milliseconds }) |
$('.carousel').carousel('cycle'); |
$('#myCarousel').hover(function () { $(this).carousel('pause') } |
$("#carousel_nav").click(function(){ var item = 4; $('#home_carousel').carousel(item); return false; }); |
这里有两个事件用来增强轮播的功能。