Question

我确实从netgloo

获得了JS代码

JS：

var checkitem = function() {
    var $this;
    $this = $("#");
    if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
      $this.children(".left").hide();
      $this.children(".right").show();
    } else if ($("#diapos .carousel-inner .item:last").hasClass("active")) {
      $this.children(".right").hide();
      $this.children(".left").show();
    } else {
      $this.children(".carousel-control").show();
    }
  };

  checkitem();

  $("#diapos").on("slid.bs.carousel", "", checkitem);

HTML：

  <div id="diapos" class="carousel paper2 slide" data-ride="carousel">
    <!-- diapos -->
    <div class="carousel-inner" role="listbox">
      <div class="overlay"></div>
      <div class="item active" id="first">
        <img src="img/01.jpg" alt="...">
      </div>
      <div class="item" id="second">
        <img src="img/02.jpg" alt="...">
      </div>
      <div class="item" id="last">
        <img src="img/03.jpg" alt="...">
       </div>
    </div>
</div>



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

代码没有隐藏相应的控件。

文件中没有其他转盘。

顺便说一句，这篇HTML的功能是什么？：

<div class="overlay"></div>

Answer 1

轮播div的id是“diapos”。所以第三行应该分配给它，因为'left'和'right'是它的直接孩子：

  var checkitem = function() {
  var $this;
  $this = $("#diapos");  // this line needs to be changed
  if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
     //continue as before from here

另外，你可能忘记关闭'diapos'div了！

Bootstrap 3：Hidding轮播控制第一个和最后一个不起作用的项目

1 个答案: