Question

我正在使用自举旋转木马，并希望更改悬停指示器上的幻灯片。如何制作呢？JSFiddle

＆＃13;

.carousel-inner img {
  margin: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide">
   <!-- 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>   
   <!-- Carousel items -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="http://placehold.it/400x200&text=1" alt="First slide">
      </div>
      <div class="item">
         <img src="http://placehold.it/400x200&text=2" alt="Second slide">
      </div>
      <div class="item">
         <img src="http://placehold.it/400x200&text=3" alt="Third slide">
      </div>
   </div>
   <!-- Carousel nav -->
</div>

＆＃13;

Answer 1

您可以在悬停时尝试trigger()点击事件。

$('.carousel-indicators  li').on('mouseover',function(){
    $(this).trigger('click');
})

.carousel-inner img {
   margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide">
  <!-- 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>   
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/400x200&text=1" alt="First slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/400x200&text=2" alt="Second slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/400x200&text=3" alt="Third slide">
    </div>
  </div>
  <!-- Carousel nav -->
</div>

更改悬停指示器上的幻灯片

1 个答案: