javascript - 响应轮播大小到多少个单元格

Question

我是 JS 的初学者，我制作了一个旋转木马，它的工作原理是在每次点击时移动边距，并计算点击次数以在用户点击结束后重置回开头。然而，这一切都按照我希望的方式工作......

这个旋转木马的问题是点击次数(基本上是容器内 <div class="caro"> 的次数)需要手动输入大小设备分辨率。

是否有更好的方法可以让轮播中有多少个单元格无关紧要？

var subButton = "#subButton";
var addButton = "#addButton";
var caro = "#caro";

var clicks = 0;

if (screen.width > 800) {
  $(addButton).click(function() {
    $(caro).animate({
      'margin-left': '-=180px'
    }, {
      duration: 400
    });
    clicks += 1;

    if (clicks > 3) {
      $(caro).animate({
        'margin-left': '0px'
      }, {
        duration: 400
      });
      clicks = 0;
    };
  });
} else {
  $(addButton).click(function() {
    $(caro).animate({
      'margin-left': '-=180px'
    }, {
      duration: 400
    });
    clicks += 1;

    if (clicks > 7) {
      $(caro).animate({
        'margin-left': '0px'
      }, {
        duration: 400
      });
      clicks = 0;
    };
  });
}

$(subButton).click(function() {
  $(caro).animate({
    'margin-left': '0px'
  }, {
    duration: 400
  });
  clicks = 0;
});

.containercarousel {
  width: calc(100% - 90px);
  position: relative;
  overflow: hidden;
  margin: 0 0px 0 30px;
  padding: 0 0 15px 0;
}

.wrappercarousel {
  width: 100%;
  max-width: 1090px;
  margin: 0 auto;
}

.caro {
  width: 150px;
  background-color: #FFF;
  margin: 15px 0 15px 30px;
  float: left;
}

.css-carousel {
  width: 2400%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercarousel">
  <div class="containercarousel">
    <div class="css-carousel" id="caro">
      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> a
        <br>
      </div>

      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> b
        <br>
      </div>

      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> c
        <br>
      </div>

      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> d
        <br>
      </div>

      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> e
        <br>
      </div>

      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> f
        <br>
      </div>

      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> g
        <br>
      </div>

      <div class="caro">
        <figure class="img100">
          <img src="https://i.imgur.com/yyWQ8qC.png" alt="" />
        </figure><br> h
        <br>
      </div>

    </div>
  </div>

  <img src="https://i.imgur.com/4tFzEDL.png" id="subButton" style="float:left;  margin-top:-190px;" />
  <img src="https://i.imgur.com/WGQCMT9.png" id="addButton" style="float:right;  margin-top:-190px;" />

  <div class="clearfix"></div>

</div>

Answer 1

jquery 的 .length 属性将为您提供选择器返回的元素数。

例如:

$("div#caro .caro").length; // 8

我会建议您避免对 id 和 class 使用相同的名称。这不是被禁止的，但如果这是您计划在未来维护或建立的元素，它很可能会在以后的某个时候让您感到困惑。