如何使用函数制作简单的旋转木马

How to make simple carousel using functions?

本文关键字:简单 旋转木马 数制 何使用 函数      更新时间:2023-09-26

有人能让我简单、易于理解的旋转木马JS吗。我真的不懂"this"的用法,所以,你能解释一下发生了什么吗?

div{
  height: 100px;
  width: 100px;
  display: inline-block;
}
div:nth-child(1) {
  background-color: red;
}
div:nth-child(2) {
  background-color: blue;
}
div:nth-child(3) {
  background-color: green;
}
.no {
  display: none;
}
<div>
  <div class="yes"></div>
  <div class="no"></div>
  <div class="no"></div>
  <ul>
    <li>left</li>
    <li>right</li>
  </ul>
</div>
<div>
  <div class="yes"></div>
  <div class="no"></div>
  <div class="no"></div>
  <ul>
    <li>left</li>
    <li>right</li>
  </ul>
</div>

div:nth-child(1) {
 background-color: red;
}
that means this CSS apply only on all first child div whose parent is <div> tag
First parent div's inside four child , three div and one <Ul> so basically according to our CSS it apply it on first div (color red).
second and third <div> block is hidden due to class ".no" containing display none property