您现在的位置是:主页 > 网站制作 > 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;">&lsaquo;</a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" style="font-size: 100px; line-height: 300px;">&rsaquo; </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)

上一篇:粘性导航

下一篇:没有了

文章评论

站点信息

  • 建站时间:2018-12-1
  • 网站程序:织梦cms
  • 主题模板《今夕何夕》
  • 文章统计:299条
  • 文章评论:490条
  • 统计数据百度统计