Bootstrap 轮播图实现代码示例 - 带有指示器和控件

以下是使用 Bootstrap 实现轮播图的代码：

HTML 部分：

<div id='myCarousel' class='carousel slide' data-ride='carousel'>
  <!-- Indicators -->
  <ol class='carousel-indicators'>
    <li data-target='#myCarousel' data-slide-to='0' class='active'></li>
    <li data-target='#myCarousel' data-slide-to='1'></li>
    <li data-target='#myCarousel' data-slide-to='2'></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class='carousel-inner'>
    <div class='item active'>
      <img src='img/slide1.jpg' alt='Slide 1'>
      <div class='carousel-caption'>
        <h3>Slide 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>

    <div class='item'>
      <img src='img/slide2.jpg' alt='Slide 2'>
      <div class='carousel-caption'>
        <h3>Slide 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>

    <div class='item'>
      <img src='img/slide3.jpg' alt='Slide 3'>
      <div class='carousel-caption'>
        <h3>Slide 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class='left carousel-control' href='#myCarousel' data-slide='prev'>
    <span class='glyphicon glyphicon-chevron-left'></span>
  </a>
  <a class='right carousel-control' href='#myCarousel' data-slide='next'>
    <span class='glyphicon glyphicon-chevron-right'></span>
  </a>
</div>

CSS 部分：

.carousel-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

.carousel-caption h3 {
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 20px;
}

.carousel-caption p {
  font-size: 1.5em;
  margin-bottom: 20px;
}

JavaScript 部分：

$(document).ready(function(){
  // Activate Carousel
  $('#myCarousel').carousel();

  // Enable Carousel Indicators
  $('.item1').click(function(){
    $('#myCarousel').carousel(0);
  });
  $('.item2').click(function(){
    $('#myCarousel').carousel(1);
  });
  $('.item3').click(function(){
    $('#myCarousel').carousel(2);
  });

  // Enable Carousel Controls
  $('.left').click(function(){
    $('#myCarousel').carousel('prev');
  });
  $('.right').click(function(){
    $('#myCarousel').carousel('next');
  });
});

代码说明：

• HTML 代码中，#myCarousel 是轮播图的 ID，carousel-indicators 是指示器，carousel-inner 是轮播图内容，carousel-caption 是文字描述。
• CSS 代码中，carousel-caption 样式用于设置文字描述的样式。
• JavaScript 代码中，$(document).ready(function(){ ... }); 用于确保页面加载完成后再执行代码，carousel() 用于启动轮播图，prev() 和 next() 用于控制轮播图的切换。

请将代码中 img/slide1.jpg、img/slide2.jpg 和 img/slide3.jpg 替换为您的图片路径。