Question

我想使用菜单栏来控制这个轮播的滚动，当我点击它们时，按钮1,2,3,4,5，旋转木马应该滑到第二张幻灯片或第三张幻灯片。

我使用过HTML，Bootstrap，CSS。

<div class="container-fluid">

    <div class="row" id="row1">
        <div class="col-sm-12" style="top: 10%; bottom: 50%;">
            <h1>AS</h1>
        </div>
    </div>

    <div class="row" id="row2">
        <div class="col-sm-4" style="top: 10%; bottom: 50%; background-color: white; height: 7.4vh">
            <h1 style="color: black">AS</h1>
        </div>
        <div class="col-sm-8" style="top: 10%; bottom: 50%; background-color: black">
            <div class="nav">
                <ul>
                    <li class="contact"><a href="#one">1</a></li>
                    <li class="contact1"><a href="two">2</a></li>
                    <li class="about"><a href="#three">3</a></li>
                    <li class="about1"><a href="#four">4</a></li>
                    <li class="tutorials"><a href="#five">5</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row" id="row3">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox" style="vertical-align: top; position: absolute; background-color:green">
                <div class="item active" id="one">
                    <h1>ABC</h1>
                <div class="item" id="two">
                    <img src="img/B.jpg" alt="Chania">
                </div>

                <div class="item" id="three">
                    <img src="img/C.jpg" alt="Flower">
                </div>

                <div class="item" id="four">
                    <img src="img/C.jpg" alt="Flower">
                </div>

                <div class="item" id="five">
                    <img src="img/C.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 glyphicon-menu-left" aria-hidden="true"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span>
            </a>
        </div>

    </div>

    <div class="row" id="row4">
        <div class="col-sm-12" style="top: 10%; bottom: 50%;">
            <button class="button" onclick="Contact">Contact</button>
        </div>
    </div>

</div>

Answer 1

我不确定......请检查。这是你想要实现的目标吗？

screenshot

您可以将图片放在不同的幻灯片中。
然后使用the .click() method来处理click JavaScript事件。
并致电the .carousel(number) method：

将轮播循环到特定帧（基于0，类似于数组）。

另见：

the .eq() method

将匹配元素集合减少到指定索引处的元素。
the .index() method

如果没有向.index()方法传递参数，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。
the .find() method

获取后代＆lt; ...＆gt;由选择器＆lt; ...＆gt;
过滤
the .children() method

获取匹配元素集中每个元素的子元素，可选择通过选择器进行过滤。
the .parent() method

＆LT; ...＆GT;遍历DOM树中每个元素的直接父元素，并从匹配元素构造一个新的jQuery对象。
＆LT; ...＆GT;在DOM树上运行一个级别。
the .prev() method

获取前一个兄弟姐妹＆lt; ...＆gt;

例如：http://codepen.io/glebkema/pen/qayLYY

var myCarousel = $('#myCarousel');
var myNav = myCarousel.prev();

myNav.find('li > a').click(function() {
  var newIndex = $(this).parent().index();
  myCarousel.carousel( newIndex );
});

myCarousel.on('slid.bs.carousel', function () {
  var newIndex = $(this).find('.carousel-inner>.active').index();
  var newLI = myNav.children().eq( newIndex );
  if ( !newLI.hasClass('active') ) {
    myNav.find('li.active').removeClass('active');
    newLI.addClass('active');
  }
});

/* Make the images wide and responsive. */
.carousel-inner img {
  height: auto;
  width: 100%;
}

/* Count nav-pills */
.nav {
  counter-reset: number;
  padding: 12px 0;
}
.nav > li > a:before {
  content: counter(number);
  counter-increment: number;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

  <ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
  </ul>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="//placehold.it/900x300/c69/fff/?text=1" alt="">
      </div>
      <div class="item">
        <img src="//placehold.it/900x300/9c6/fff/?text=2" alt="">
      </div>
      <div class="item">
        <img src="//placehold.it/900x300/69c/fff/?text=3" alt="">
      </div>
      <div class="item">
        <img src="//placehold.it/900x300/c33/fff/?text=4" alt="">
      </div>
      <div class="item">
        <img src="//placehold.it/900x300/099/fff/?text=5" alt="">
      </div>
      <div class="item">
        <img src="//placehold.it/900x300/f93/fff/?text=6" alt="">
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用按钮

1 个答案: