Jquery 引导转盘和显示根据当前幻灯片显示不同的文本

我有一个引导转盘，我想根据转盘下段落中的幻灯片显示相应的文本。有没有jquery方法可以做到这一点

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

即：第一张幻灯片，文本“嗨！”；第二张幻灯片，“Lorem ipsum dolor sit amet…”

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

我的旋转木马：

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

我想将文本显示到一个id为“text”的段落中

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

我发现了这个话题，但我并不聪明，有人能告诉我怎么做吗？我是jquery的新手，非常感谢

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

---

现在对您的问题有了更好的了解，您可以这样做：

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

每次幻灯片转换完成时，我们都会将

旋转木马标题中的文本添加到id为
text
的自定义div中。我的理解是，您不希望捕获显示在幻灯片中，因此它只是用css隐藏

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

$('.carousel').on('slid.bs.carousel', function () {
   $('#text').html($('.active > .carousel-caption').html());
   });

第一次回复：

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

将带有类
旋转木马标题的div添加到项目中（如下所示）。在该div中，您将要显示的文本与图像放在一起

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

从bootstrap网站：

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>


你的文字放在这里。。
谢谢，但我还没有很好地表达我的意思，我需要在旋转木马中显示标题（文本上没有旋转木马动画，只需将一个标题更改为另一个标题）这是一个了不起的解决方案@EntiendNull