Question

我对Java语言还很陌生，但是会尽量简化。

在我的轮播中，我希望执行以下操作：

前进时，我希望保持前一个点为绿色，并将innerHTML更改为刻度，而不是步号。
向后循环时，它会恢复为以前的状态。

由于某种原因，我似乎无法在我的代码中使用它。...

任何帮助将不胜感激。

carousel = (function(){
    //gets all required elements
    var next = document.querySelector('.next');
    var prev = document.querySelector('.prev');
    var items = document.querySelectorAll('.s-container li');
    var dots = document.querySelectorAll('.dots li');
    //creates data for counter
    var counter = 0;
	  var dotCounter = 0;
    var amount = items.length;
    var dotsAmount = dots.length;
    var currentSlide = items[0];
    var currentDot = dots[0];
	//initialise
    currentSlide.classList.add('active');
    currentDot.classList.add('color');
	//slides function
    function slideNav(direction) {
    currentSlide.classList.remove('active');
    counter = counter + direction;
    if (direction === -1 &&
        counter < 0) {
      counter = amount - 1;
    }
    if (direction === 1 &&
        !items[counter]) {
      counter = 0;
    }
    currentSlide = items[counter];
    currentSlide.classList.add('active');
	console.log(counter);
	}
    //dots function
	function dotNav(direction) {
    currentDot.classList.remove('color');
    dotCounter = dotCounter + direction;
    if (direction === -1 &&
        dotCounter < 0) {
      dotCounter = dotsAmount - 1;
    }
    if (direction === 1 &&
        !dots[dotCounter]) {
      dotCounter = 0;
    }
    currentDot = dots[dotCounter];
    currentDot.classList.add('color');
	console.log(dotCounter);
  }

  //controls executes navigate function when clicked
    next.addEventListener('click', function() {
      slideNav(1);
	    dotNav(1);
      console.log(next, currentSlide);
    });
    prev.addEventListener('click', function() {
      slideNav(-1);
	    dotNav(-1);
      console.log(prev, currentSlide);

    });
	//sets first dot and slide on page load
    slideNav(0);
	  dotNav(0);
  })();

.carousel li {
  list-style-type: none;
}

#c-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel {
  display: flex;
  flex-direction: column;
  border-top: 4px solid green;
  background-color: #fff;
  padding: 25px;
  width: 960px;
  height: 600px;
  -webkit-box-shadow: 0px 0px 8px 2px rgba(171,171,171,0.21);
-moz-box-shadow: 0px 0px 8px 2px rgba(171,171,171,0.21);
box-shadow: 0px 0px 8px 2px rgba(171,171,171,0.21);
}

.dots {
  width: 100%;
}

.dots ol{
  display: flex;
  justify-content: center;
  position: relative;
}

.dots li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 40px;
  border: solid 2px #ababab;
  border-radius: 50%;
  color: #ababab;
  position: relative;
  z-index: 10;
}

.dots li::before {
  content: "";
  height: 2px;
  width: 40px;
  background-color: #ababab;
  position: absolute;
  z-index: 9;
  right: 42px;
}

.dots li:first-child::before {
  display: none;
}

.color {
  background-color: green !important;
  color: #fff !important;
  border: solid 2px green !important;
}

.colorprev {
	background-color: red !important;
	color: #fff !important;
}

.s-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-top: 50px;
}

.slide {
  display: flex;
  justify-content: space-between;
  width: 100%;
  display: none;
}

.slide img, .s-content {
  padding: 0 60px;

}

.s-content {
  height: 250px;
  width: 350px;
}

.controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

button {
  cursor: pointer;
}

.prev {
  background: none;
  border: none;
}

.next {
  border: 2px solid green;
  background: none;
  padding: 20px;
}

.active {
  display: flex;
}

  <section id="c-container">
  <div class="carousel">
    <h1>Step by step: Lorem</h1>
    <div class="dots">
      <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ol>
    </div>
    <ol class="s-container">
      <li class="slide">
        <img src="https://picsum.photos/350/250" alt="">
        <div class="s-content">
          <h3>Step 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sapiente facilis officiis odio maxime corporis ad unde sint est perspiciatis,
            nemo quo recusandae provident nostrum, nulla asperiores repellat suscipit optio!</p>
        </div>
      </li>
      <li class="slide">
        <img src="https://picsum.photos/350/250" alt="">
        <div class="s-content">
          <h3>Step 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sapiente facilis officiis odio maxime corporis ad unde sint est perspiciatis,
            nemo quo recusandae provident nostrum, nulla asperiores repellat suscipit optio!</p>
        </div>
      </li>
      <li class="slide">
        <img src="https://picsum.photos/350/250" alt="">
        <div class="s-content">
          <h3>Step 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sapiente facilis officiis odio maxime corporis ad unde sint est perspiciatis,
            nemo quo recusandae provident nostrum, nulla asperiores repellat suscipit optio!</p>
        </div>
      </li>
      <li class="slide">
        <img src="https://picsum.photos/350/250" alt="">
        <div class="s-content">
          <h3>Step 4</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sapiente facilis officiis odio maxime corporis ad unde sint est perspiciatis,
            nemo quo recusandae provident nostrum, nulla asperiores repellat suscipit optio!</p>
        </div>
      </li>
      <li class="slide">
        <img src="https://picsum.photos/350/250" alt="">
        <div class="s-content">
          <h3>Step 5</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sapiente facilis officiis odio maxime corporis ad unde sint est perspiciatis,
            nemo quo recusandae provident nostrum, nulla asperiores repellat suscipit optio!</p>
        </div>
      </li>
    </ol>
    <div class="controls">
      <button class="prev">< Previous</button>
      <button class="next">Next ></button>
    </div>
  </div>
  </section>

Javascript先前的同级

0 个答案: