使用bootstrap书写轮播图效果

Love The Way You Lie 2022-03-25 10:46 240阅读 0赞

1、案例分析

Bootstrap已经提供了轮播图的完整案列，参考文档：[https://v3.bootcss.com/javascript/\#carousel ][https_v3.bootcss.com_javascript_carousel]

2、实例

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      
      <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>
    
      
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>
    
      
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

3、实例修改，添加内容

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      
      <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>
    
      
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="/img/1.png" alt="第一张图">      
        </div>
        <div class="item">
          <img src="/img/2.png" alt="第二张图">
        </div>
         <div class="item">
          <img src="/img/3.png" alt="第三张图">
        </div>
      </div>
    
      
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        
        <span class="sr-only">Next</span>
      </a>
    </div>

[https_v3.bootcss.com_javascript_carousel]: https://v3.bootcss.com/javascript/#carousel