bootstrap如何实现图片自动轮播？bootstrap实现图片自动轮播的实
发布时间：01/14 来源： 浏览：
关键词：
小编分享的这篇文章给出了bootstrap如何实现自动轮播的实例代码，希望能帮助到大家
bootstrap图片自动轮播效果图：
代码实现：
|
<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<linkrel="stylesheet"href="bootstrap.min.css"/>
<linkrel="stylesheet"href="bootstrap-theme.min.css"/>
<scriptsrc="jquery.min.js"></script>
<scriptsrc="bootstrap.min.js"></script>
<style>
#div1 {width:600px; height:500px}
</style>
</head>
<body>
<divid="div1">
<divid="carousel-example-generic"class="carousel slide"data-ride="carousel">
<!-- Indicators -->
<olclass="carousel-indicators">
<lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
<lidata-target="#carousel-example-generic"data-slide-to="1"></li>
<lidata-target="#carousel-example-generic"data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<divclass="carousel-inner"role="listbox">
<divclass="item active">
<imgsrc="airplane1.jpg">
</div>
<divclass="item">
<imgsrc="airplane2.jpg">
</div>
<divclass="item">
<imgsrc="airplane3.jpg">
</div>
</div>
<!-- Controls -->
<aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev">
<spanclass="glyphicon glyphicon-chevron-left"id="aaron1"></span>
<spanclass="sr-only">Previous</span>
</a>
<aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next">
<spanclass="glyphicon glyphicon-chevron-right"id="aaron2"></span>
<spanclass="sr-only">Next</span>
</a>
</div>
</div>
</body>
<html>
|
以上代码可以实现 div1 中的图片自动轮播，轮播时间默认5000ms。
