将JavaScript添加到我的Carousel

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>

Answer 2

需要jQuery的简单答案是

setInterval(function(){
    $('label.carousel-control.next:visible').click()
}, 3000) // change slide every 3 seconds