Question

我试图在JS中编写我的第一个文本滑块，起初看起来非常简单，但它却非常容易受到攻击。

当＆＃39;之前＆＃39;按钮被点击它工作正常，但省略了最后<li>项，当＆＃39; next＆＃39;点击按钮，所有<li>成为空class=""，并且全部，它不会滑动到下一个项目。

这是我的代码：

＆＃13;

const slider = document.querySelector('.text-slider');
const sliderItems = slider.querySelectorAll('li');
const sliderNav = slider.querySelector('.slider-nav');

function changeSlide(e) {
	// if the next button is clicked the direction is true
	// if the prev button is clicked the direction is false
	const direction = e.target.classList.contains('nav-next') ? true : false;

	const itemsInTotal = sliderItems.length;

	for(let i = 0; i < itemsInTotal; i++) {

		// if the item is active
		if(sliderItems[i].classList.contains('active')) {

			//delete the active class
			sliderItems[i].classList.remove('active');

			//if the NEXT button was clicked
			if(direction) {
				//if it's the last slide
				if(i === itemsInTotal-1) {
			 		sliderItems[0].classList.add('active');
			 	}
			 	else {
			 		sliderItems[i+1].classList.add('active');
			 	}
			// if the PREV button was clicked	
			} else {
				//if it's the first element
				if(i === 0) { 
			 		sliderItems[itemsInTotal-1].classList.add('active');
			 	} else {
			 		sliderItems[i-1].classList.add('active');
			 	}
			 }
		}	
	};
}


sliderNav.addEventListener('click', changeSlide);

＆＃13;

  
  .hero {
    background-color: #252525;
    min-height: 100vh;
    position: relative;
  }
  .hero ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .hero ul li {
      display: none;
      color: #fff;
      text-align: center;
      font-family: "Frank Ruhl Libre", serif;
      font-size: 2em; }
      .hero ul li span {
        color: #f5989d;
        text-transform: uppercase;
        font-family: "Josefin Sans", sans-serif;
        font-size: 1.3em;
        font-weight: 700;
        display: block; }
      .hero ul li.active {
        display: block; }
  .hero .slider-nav a {
    border:1px solid red;
    position: absolute;
    content: ' ';
    width: 30px;
    height: 30px;
    background: url("img/arrow-r.png");
    background-size: contain;
    position: absolute;
    top: calc( 50% - 15px );
    z-index: 10; }
    .hero .slider-nav a:hover {
      cursor: pointer; }
    .hero .slider-nav a.nav-prev {
      transform: rotate(180deg);
      left: 7%; }
    .hero .slider-nav a.nav-next {
      right: 7%; }

＆＃13;

	<section class="hero">
		<div class="text-slider">
			<div class="slider-nav">
				<a class="slider-nav nav-prev"></a>
				<a class="slider-nav nav-next"></a>
			</div>
			<ul>
				<li class="active">I like take photos <span>in the woods</span></li>
				<li>I like observing <span>people and their emotions</span></li>
				<li>I always take <span>the best of life</span></li>
				<li>I always take <span>the best of life 2</span></li>
				<li>I always take <span>the best of life 3</span></li>
			</ul>
		</div>
	</section>

＆＃13;

我将不胜感激。

Answer 1

事实上，你的前一个按钮也有问题因为状态＆＃34;生活中最好的3＆＃34;永远不会显示。

我建议你使用while循环代替for，因为你总是改变所有＆＃34; li＆＃34;而不是只更改相关的2（旧的活动和新的活动）。

我认为，这会奏效：

changeSlide(e: any) {
    // if the next button is clicked the direction is true
    // if the prev button is clicked the direction is false
    const direction = e.target.classList.contains('nav-next') ? true : false;

    const itemsInTotal = this.sliderItems.length;
    let isChangeDone = false;
    let i = 0;
    while(!isChangeDone && i < itemsInTotal) {

        // if the item is active
        if(this.sliderItems[i].classList.contains('active')) {

            //delete the active class
            this.sliderItems[i].classList.remove('active');

            //if the NEXT button was clicked
            if(direction) {
                //if it's the last slide
                if(i === itemsInTotal-1) {
                    this.sliderItems[0].classList.add('active');
                    isChangeDone = true;
                }
                else {
                    this.sliderItems[i+1].classList.add('active');
                    isChangeDone = true;
                }
                // if the PREV button was clicked
            } else {
                //if it's the first element
                if(i === 0) {
                    this.sliderItems[itemsInTotal-1].classList.add('active');
                    isChangeDone = true;
                } else {
                    this.sliderItems[i-1].classList.add('active');
                    isChangeDone = true;
                }
            }
        }
        i++;
    };
}

让我知道。

Answer 2

const slider = document.querySelector('.text-slider');
const sliderItems = slider.querySelectorAll('li');
const sliderNav = slider.querySelector('.slider-nav');
let counter = 0;
function changeSlide(e) {
	// if the next button is clicked the direction is true
	// if the prev button is clicked the direction is false
	const direction = e.target.classList.contains('nav-next') ? true : false;

	const itemsInTotal = sliderItems.length;
	for(let i = 0; i < itemsInTotal; i++) {

		// if the item is active
		if(sliderItems[i].classList.contains('active')) {

			//delete the active class
			sliderItems[i].classList.remove('active');

			//if the NEXT button was clicked
			if(direction) {
				//if it's the last slide
   
				if(i === itemsInTotal-1) {

			 		sliderItems[0].classList.add('active');
			 	}
			 	else {
                        
			 		sliderItems[i+1].classList.add('active');
                  break;
			 	}
			// if the PREV button was clicked	
			} else {
   
				//if it's the first element
				if(i === 0) { 
			 		sliderItems[itemsInTotal-1].classList.add('active');
                    break;
			 	} else {
			 		sliderItems[i-1].classList.add('active');
			 	}
			 }
		}	
	};
}


sliderNav.addEventListener('click', changeSlide);

  
  .hero {
    background-color: #252525;
    min-height: 100vh;
    position: relative;
  }
  .hero ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .hero ul li {
      display: none;
      color: #fff;
      text-align: center;
      font-family: "Frank Ruhl Libre", serif;
      font-size: 2em; }
      .hero ul li span {
        color: #f5989d;
        text-transform: uppercase;
        font-family: "Josefin Sans", sans-serif;
        font-size: 1.3em;
        font-weight: 700;
        display: block; }
      .hero ul li.active {
        display: block; }
  .hero .slider-nav a {
    border:1px solid red;
    position: absolute;
    content: ' ';
    width: 30px;
    height: 30px;
    background: url("img/arrow-r.png");
    background-size: contain;
    position: absolute;
    top: calc( 50% - 15px );
    z-index: 10; }
    .hero .slider-nav a:hover {
      cursor: pointer; }
    .hero .slider-nav a.nav-prev {
      transform: rotate(180deg);
      left: 7%; }
    .hero .slider-nav a.nav-next {
      right: 7%; }

	<section class="hero">
		<div class="text-slider">
			<div class="slider-nav">
				<a class="slider-nav nav-prev"></a>
				<a class="slider-nav nav-next"></a>
			</div>
			<ul>
				<li class="active">I like take photos <span>in the woods</span></li>
				<li>I like observing <span>people and their emotions</span></li>
				<li>I always take <span>the best of life</span></li>
				<li>I always take <span>the best of life 2</span></li>
				<li>I always take <span>the best of life 3</span></li>
			</ul>
		</div>
	</section>

好的，我在循环中添加了2 break以在下一个元素上应用该类后停止迭代。

JS中的文本滑块无法正常滑动

2 个答案: