使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js.
<div id="carousel-example-generic" data-ride="carousel">
<!—轮播导航 -->
<ol >
<li data-target="#carousel-example-generic" data-slide-to="0" ></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!—轮播项目 -->
<div role="listbox">
<div >
<img src='/images/loading.gif' data-original="~/images/Chrysanthemum.jpg" />
<div >
ffffffff
</div>
</div>
<div >
<img src='/images/loading.gif' data-original="~/images/Desert.jpg" />
<div >
xxxxxxxxxxxxxxxx
</div>
</div>
<div >
<img src='/images/loading.gif' data-original="~/images/Lighthouse.jpg" />
<div >
mmmmmmmmmmmm
</div>
</div>
</div>
<!—轮播导航 -->
<a href="#carousel-example-generic" role="button" data-slide="prev">
<span ></span>
<span >Previous</span>
</a>
<a href="#carousel-example-generic" role="button" data-slide="next">
<span ></span>
<span >Next</span>
</a>
</div>
效果如下:
原标题:第十篇.bootstrap轮播
关键词: