你的位置:首页 > Java教程

[Java教程]Bootstrap嵌套轮播


Bootstrap的轮播通过以下层次的html代码实现:

<div id="CarouselId">
  <div >
    <div >

      <div id="CarouselId1">

        <div >

          <div >第二层容器第一帧的内容</div>
          <div >第一层容器第二帧的内容</div>

          ……

        </div>

        <ol >
          <li data-slide-to="0" data-target="#CarouselId1"></li>
          <li data-slide-to="1" data-target="#CarouselId1"></li>
          <li data-slide-to="2" data-target="#CarouselId1"></li>

          ……
        </ol> 

        <a data-slide="prev" href="#CarouselId1"></a>
        <a data-slide="next" href="#CarouselId1"></a>

      </div>

    </div>
    <div >第一层容器第一帧的内容</div>
    <div >第一层容器第二帧的内容</div>

    ……

  </div>

  <ol >
    <li data-slide-to="0" data-target="#CarouselId"></li>
    <li data-slide-to="1" data-target="#CarouselId1"></li>
    <li data-slide-to="2" data-target="#CarouselId1"></li>

    ……
  </ol> 

  <a data-slide="prev" href="#CarouselId"> </a>
  <a data-slide="next" href="#CarouselId"> </a>
</div>

但如果

 <div ></div>

中要嵌套轮播的话,现有的代码就会出问题,因为javascript中的事件绑定中,选择元素使用了find方法,初始化时第一层id为CarouselId的轮播容器选择class为item时将item里面嵌套的item也选取了,同样选取所有class为carousel-indicators的子元素时也嵌套选取,需要手动修改用children选择第一级子元素。