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＆＃39; .length属性将为您提供选择器返回的元素数。

例如：

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

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

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

1 个答案: