javascript - 将 JavaScript 添加到我的轮播

Question

我对 JavaScript 知之甚少，所以如何添加一些代码以使我的轮播幻灯片每隔几秒更改一次？我是否需要更改 CSS 或 HTML 的任何内容才能使其正常工作？任何帮助，谢谢。

  .carousel {
      border-style:solid;
      border-width:1px;
      border-color:rgba(0, 0, 0, 0.05);
      box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
      widht:100%;
      height:250px;
  }

  .carousel-inner {
      position: relative;
      overflow: hidden;
      width: 100%;
      height:250px;
  }

  .carousel-open:checked + .carousel-item {
      position: absolute;
      opacity: 100;
      background-color:white;
      width:100%;
      height:250px;
  }

  .carousel-item {
      position: absolute;
      opacity: 0;
      padding-top:10px;
      text-align:center;
  }

  .carousel-control {
      background: rgba(0, 0, 0, 0);
      border-radius: 50%;
      color:#008c6c;
      cursor: pointer;
      display: none;
      font-size: 30px;
      height: 40px;
      line-height: 35px;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(0, -50%);
      cursor: pointer;
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      text-align: center;
      width: 40px;
      z-index: 10;
  }

  .carousel-control.prev {
      left: 2%;
  }

  .carousel-control.next {
      right: 2%;
  }

  .carousel-control:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #008c6c;
  }

  #carousel-1:checked ~ .control-1,
  #carousel-2:checked ~ .control-2,
  #carousel-3:checked ~ .control-3,
  #carousel-4:checked ~ .control-4{
      display: block;
  }

  .carousel-indicators {
      margin: 0;
      padding: 0;
      position: absolute;
      bottom: 2px;
      left: 0;
      right: 0;
      text-align: center;
  }

  .carousel-indicators li {
      display: inline-block;
      margin: 0 5px;
  }

  .carousel-bullet {
      color: rgba(0, 0, 0, 0.05);
      cursor: pointer;
      font-size: 25px;
  }

  .carousel-bullet:hover {
      color: rgba(0, 0, 0, 0.1);
  }

  .HRConnectImage
  {width:375px;
  padding-top:50px;
  display:inline-block;}

  #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
  #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
  #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet,
  #carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet{
      color: #008c6c;
  }

  #title {
      width: 100%;
      position: absolute;
      padding: 0px;
      margin: 0px auto;
      text-align: center;
      font-size: 27px;
      color: rgba(255, 255, 255, 1);
      font-family: 'Open Sans', sans-serif;
      z-index: 9999;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
  }

  ul
  {margin-left:40px;
  margin-right:60px;
  text-align:left;}

<link href="http://wearenorthwest.northwest.ca/departments/humanresources/hr-connect-two/Documents/HRHome.css" rel="stylesheet"/>

  <div class="carousel"> 
     <div class="carousel-inner"> 
        <input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/> 
        <div class="carousel-item">
  <h1>Slide 1</h1>
  <br/>
           <ul>
      <li>Content.</li>
    </ul>
        </div> 
        <input name="carousel" class="carousel-open" id="carousel-2" aria-hidden="true" type="radio" hidden="true"/> 
        <div class="carousel-item"> 
           <h1>Slide 2</h1>
  <br/>
           <ul>
      <li>Content.</li>
    </ul>
        </div> 
        <input name="carousel" class="carousel-open" id="carousel-3" aria-hidden="true" type="radio" hidden="true"/> 
        <div class="carousel-item"> 
           <h1>Slide 3</h1> 
  <br/>
           <ul>
      <li>Content.</li>

    </ul>
        </div>
        <input name="carousel" class="carousel-open" id="carousel-4" aria-hidden="true" type="radio" hidden="true"/> 
        <div class="carousel-item"> 
           <h1>Slide 4</h1> 
  <br/>
           <ul>
      <li> Content.</li>

    </ul>
        </div> 
        <label class="carousel-control prev control-1" for="carousel-4">‹</label>
        <label class="carousel-control next control-1" for="carousel-2">›</label>
        <label class="carousel-control prev control-2" for="carousel-1">‹</label>
        <label class="carousel-control next control-2" for="carousel-3">›</label>
        <label class="carousel-control prev control-3" for="carousel-2">‹</label>
        <label class="carousel-control next control-3" for="carousel-4">›</label> 
        <label class="carousel-control prev control-4" for="carousel-3">‹</label>
        <label class="carousel-control next control-4" for="carousel-1">›</label>
        <ol class="carousel-indicators"> 
           <li> 
              <label class="carousel-bullet" for="carousel-1">•</label> </li> 
           <li> 
              <label class="carousel-bullet" for="carousel-2">•</label> </li> 
           <li> 
              <label class="carousel-bullet" for="carousel-3">•</label> </li> 
           <li> 
              <label class="carousel-bullet" for="carousel-4">•</label> </li> 
        </ol> 
     </div> 
  </div>

Answer 1

您可以定义一个 setInterval 来改变复选框的 checked 属性。只需修改 seconds 变量即可更改速度。

var carouselOpen = document.getElementsByClassName('carousel-open'),
    count = 1,
    seconds = 1;

function showSlide(el) {
  el.checked = true;
}

var interval = setInterval(function() {
  count = count % carouselOpen.length;
  showSlide(carouselOpen[count]);
  count++;
}, seconds*1000)

.carousel {
      border-style:solid;
      border-width:1px;
      border-color:rgba(0, 0, 0, 0.05);
      box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
      widht:100%;
      height:250px;
  }

  .carousel-inner {
      position: relative;
      overflow: hidden;
      width: 100%;
      height:250px;
  }

  .carousel-open:checked + .carousel-item {
      position: absolute;
      opacity: 100;
      background-color:white;
      width:100%;
      height:250px;
  }

  .carousel-item {
      position: absolute;
      opacity: 0;
      padding-top:10px;
      text-align:center;
  }

  .carousel-control {
      background: rgba(0, 0, 0, 0);
      border-radius: 50%;
      color:#008c6c;
      cursor: pointer;
      display: none;
      font-size: 30px;
      height: 40px;
      line-height: 35px;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(0, -50%);
      cursor: pointer;
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      text-align: center;
      width: 40px;
      z-index: 10;
  }

  .carousel-control.prev {
      left: 2%;
  }

  .carousel-control.next {
      right: 2%;
  }

  .carousel-control:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #008c6c;
  }

  #carousel-1:checked ~ .control-1,
  #carousel-2:checked ~ .control-2,
  #carousel-3:checked ~ .control-3,
  #carousel-4:checked ~ .control-4{
      display: block;
  }

  .carousel-indicators {
      margin: 0;
      padding: 0;
      position: absolute;
      bottom: 2px;
      left: 0;
      right: 0;
      text-align: center;
  }

  .carousel-indicators li {
      display: inline-block;
      margin: 0 5px;
  }

  .carousel-bullet {
      color: rgba(0, 0, 0, 0.05);
      cursor: pointer;
      font-size: 25px;
  }

  .carousel-bullet:hover {
      color: rgba(0, 0, 0, 0.1);
  }

  .HRConnectImage
  {width:375px;
  padding-top:50px;
  display:inline-block;}

  #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
  #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
  #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet,
  #carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet{
      color: #008c6c;
  }

  #title {
      width: 100%;
      position: absolute;
      padding: 0px;
      margin: 0px auto;
      text-align: center;
      font-size: 27px;
      color: rgba(255, 255, 255, 1);
      font-family: 'Open Sans', sans-serif;
      z-index: 9999;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
  }

  ul
  {margin-left:40px;
  margin-right:60px;
  text-align:left;}

<link href="http://wearenorthwest.northwest.ca/departments/humanresources/hr-connect-two/Documents/HRHome.css" rel="stylesheet" />

<div class="carousel">
  <div class="carousel-inner">
    <input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/>
    <div class="carousel-item">
      <h1>Slide 1</h1>
      <br/>
      <ul>
        <li>Content.</li>
      </ul>
    </div>
    <input name="carousel" class="carousel-open" id="carousel-2" aria-hidden="true" type="radio" hidden="true" />
    <div class="carousel-item">
      <h1>Slide 2</h1>
      <br/>
      <ul>
        <li>Content.</li>
      </ul>
    </div>
    <input name="carousel" class="carousel-open" id="carousel-3" aria-hidden="true" type="radio" hidden="true" />
    <div class="carousel-item">
      <h1>Slide 3</h1>
      <br/>
      <ul>
        <li>Content.</li>

      </ul>
    </div>
    <input name="carousel" class="carousel-open" id="carousel-4" aria-hidden="true" type="radio" hidden="true" />
    <div class="carousel-item">
      <h1>Slide 4</h1>
      <br/>
      <ul>
        <li> Content.</li>

      </ul>
    </div>
    <label class="carousel-control prev control-1" for="carousel-4">‹</label>
    <label class="carousel-control next control-1" for="carousel-2">›</label>
    <label class="carousel-control prev control-2" for="carousel-1">‹</label>
    <label class="carousel-control next control-2" for="carousel-3">›</label>
    <label class="carousel-control prev control-3" for="carousel-2">‹</label>
    <label class="carousel-control next control-3" for="carousel-4">›</label>
    <label class="carousel-control prev control-4" for="carousel-3">‹</label>
    <label class="carousel-control next control-4" for="carousel-1">›</label>
    <ol class="carousel-indicators">
      <li>
        <label class="carousel-bullet" for="carousel-1">•</label> </li>
      <li>
        <label class="carousel-bullet" for="carousel-2">•</label> </li>
      <li>
        <label class="carousel-bullet" for="carousel-3">•</label> </li>
      <li>
        <label class="carousel-bullet" for="carousel-4">•</label> </li>
    </ol>
  </div>
</div>