您现在的位置是：主页 > 网站制作 > Css|Html >
基于bootstrap实现轮播图
刘清2019-06-25 12:01【个人博客】人已围观
简介div id=carousel-example-generic class=carousel slide data-ride=carousel !-- Indicators -- ol class=carousel-indicators li data-target=#carousel-example-generic data-slide-to=0 class=active/li li data-target=#carousel-example-generic data-sl
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background:#9f9181; ">
<img src="1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background:#9f9181; ">
<img src="2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background:#9f9181; " >
<img src="3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="font-size: 100px; line-height: 300px;">‹</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" style="font-size: 100px; line-height: 300px;">› </a>
<script type="text/javascript">
$(function(){
$('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
$(window).resize(function)(){
$('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
});
});
Tags： 轮播图
很赞额！（74）
上一篇：粘性导航
下一篇：没有了
文章评论
标签云
