html - 如何更改轮播中的两个 div 内容

Question

我需要帮助，在同一个轮播中更改两个 div 内容。下面是图片，我已将内容标记为红色，我希望它在单击左右轮播按钮时发生变化。

https://jsfiddle.net/austinpeter/cg7hqk0n/

<div class="col-md-12 ourworkInfo" style="position:relative;text-align:center;height:calc(100% - 142px);overflow: hidden; display:none">
  <div class="col-md-12" style="padding:0">
    <div style="background:#66DBFF;height:50px;position:relative;padding:0;">
      <div class="col-md-4">
        <div id="ourWorkcarousel" class="carousel slidec" data-interval="false" data-ride="carousel" style="width: 50%;padding-left: 50px;padding-right: 50px;height:50px">
          <div class="carousel-inner" role="listbox" style="height:50px">
            <div class="item active" style="top:10px">
              Infographics
            </div>
            <div class="item">
              Interactive<br />
              Infographics
            </div>
            <div class="item">
              Motion<br />
              Graphics
            </div>
          </div>
          <a class="left carousel-control cleft" href="#ourWorkcarousel" role="button" data-slide="prev" style="position:absolute;left:0">
            <span aria-hidden="true">
              <img src="assets/imgs/left_arrow.png" style="width:25px;" />
            </span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control cright" href="#ourWorkcarousel" role="button" data-slide="next">
            <span aria-hidden="true"><img src="assets/imgs/right_arrow.png" style="width:25px;" /></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <span>
          <img src="assets/imgs/close.png" style="width:25px;vertical-align:central;top: 10px; position: relative;right:20px;" class="pull-right" onclick="CloseourWork()" />
        </span>
      </div>
    </div>
  </div>
  <div class="col-md-12" style="position:relative;height:475px;overflow:hidden;top:10px">
    <div class="col-lg-12">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-md-6" style="padding-right:5px;overflow:hidden;">
            <div class="ig-im-1" style="height:225px;position:relative;">
              <div class="ig-tri-1"></div>
              <img src="assets/imgs/ig1.png" class="grayscale" style="overflow:hidden;top:0;left:0; position: absolute;width:100%" />
              <div class="ig-im-1-txt">
                Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus.
              </div>
            </div>
          </div>
          <div class="col-md-6" style="padding-right:5px;overflow:hidden;">
            <div class="ig-im-2" style="height:225px;position:relative">
              <div class="ig-tri-2">

              </div>
              <img src="assets/imgs/ig1.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute;width:100%" />
              <div class="ig-im-2-txt">
                Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus.
              </div>
            </div>
          </div>
        </div>
        <div class="row" style="position:relative;top:10px">
          <div class="col-md-12" style="padding-right:5px;overflow:hidden;">
            <div class="ig-im-3" style="height:225px;position:relative;">
              <div class="ig-tri-3"></div>
              <img src="assets/imgs/ig3.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute;width:100%" />
              <div class="ig-im-3-txt">
                Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4" style="padding-left:0;overflow: hidden; height: 460px;position: relative; left: 10px; width: 32%;">
        <div class="ig-im-4" style="height:475px;    padding-left: 0; ">
          <div class="ig-tri-4"></div>
          <img src="assets/imgs/ig4.png" class="grayscale" style="overflow:hidden; top:0;left:0; position: absolute; width:100%" />
          <div class="ig-im-4-txt">
            Pies, charts, and information made<br />interactive, montes nascetur ridiculus<br />mus.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

score 0 · Accepted Answer

这是一个演示如何根据当前幻灯片的索引显示/隐藏文本。

步骤：

使用slide.bs.carousel事件检测slide滑块何时更换。
通过获取当前幻灯片的索引$('.item').index(e.relatedTarget);。
隐藏所有.caption并显示当前$('.caption').hide().eq(index).show();

完整代码

$('#myCarousel').on('slide.bs.carousel', function (e) {
  // get the index of the slide
  var index = $('.item').index(e.relatedTarget);
  // hide all captions and show the caption with the item's index
  $('.caption').hide().eq(index).show();
})

.carousel {
  display:inline-block;
}

.caption:not(:first-child) {
  display:none;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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" role="listbox">
    <div class="item active">
      <img src="http://i.stack.imgur.com/Ee7Xh.jpg">
    </div>

    <div class="item">
      <img src="http://i.stack.imgur.com/uncqm.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="http://i.stack.imgur.com/Uv3d4.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

http://jsbin.com/wuzihaj/edit?html,css,js

html - 如何更改轮播中的两个 div 内容

1 回答 1

Related

Reference