javascript - 根据选中的单选按钮显示幻灯片

Question

我有一个 slider ，里面有 6 张幻灯片。我的目标是，如果选中单选按钮 id="male"，则仅显示前 3 张幻灯片；如果当前选中 id="female"按钮，则仅显示最后 3 张幻灯片。我尝试将数组拼接成两半并根据选中的按钮设置幻灯片索引，但没有帮助。这是我的 HTML 代码:

   function skinSlider() {
        let slideIndex = 1,
          female = document.getElementById('female'),
          male = document.getElementById('male'),
          skinSlider = document.getElementsByClassName('skin')[0],
          skinSliderItem = document.getElementsByClassName('skin-color'),
          prev = skinSlider.querySelector('.prev'),
          next = skinSlider.querySelector('.next');

        showSlides(slideIndex);

        function plusSlides(n) {
          showSlides(slideIndex += n);
        }

        prev.addEventListener('click', () => {
          plusSlides(-1);
        });

        next.addEventListener('click', () => {
          plusSlides(1);
        });

        function showSlides(n) {
          // if (female.checked && slideIndex < 4) {
          //   slideIndex = 4;
          // }
          if (n > skinSliderItem.length) {
            slideIndex = 1;
          }
          if (n < 1) {
            slideIndex = skinSliderItem.length;
          }

          for (let i = 0; i < skinSliderItem.length; i++) {
            skinSliderItem[i].style.display = 'none';
          }

          skinSliderItem[slideIndex - 1].style.display = 'block';

          let personSkin = document.getElementById('person-skin');
          personSkin.style.background = `url('./img/skin/skin-${slideIndex}.png') center no-repeat`;
          personSkin.style.backgroundSize = 'cover';
        }
      };

<div class="radio">
      <input value="male" id="male" name="sex" type="radio">
      <label for="sex">Male</label>
      <input value="female" id="female" checked name="sex" type="radio">
      <label for="sex">Female</label>
     </div>
     <div class="custom-style">
	<div class="style-text">
	 Choose skin color
	</div>
	<div class="skin">
	<div class="prev">
	 <i class="flaticon-left-arrow"></i>
	</div>
	<div class="skin-color skin-color-1"></div>
	<div class="skin-color skin-color-2"></div>
	<div class="skin-color skin-color-3"></div>
	<div class="skin-color skin-color-4"></div>
	<div class="skin-color skin-color-5"></div>
	<div class="skin-color skin-color-6"></div>
	<div class="next">
	 <i class="flaticon-right-arrow"></i>
	</div>
      </div>

   

如有任何帮助，我们将不胜感激。

Answer 1

我认为这大致可以满足您的需求。不幸的是， slider 在向右移动时会“回绕”，而在向左移动时则简单地停在下限处。但我会将其作为对您的额外挑战。 :-)

  function skinSlider() {
    let slideIndex = 1,
      female = document.getElementById('female'),
      male = document.getElementById('male'),
      skinSlider = document.getElementsByClassName('skin')[0],
      skinSliderItem = document.getElementsByClassName('skin-color'),
      prev = skinSlider.querySelector('.prev'),
      next = skinSlider.querySelector('.next');

    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    prev.addEventListener('click', () => {
      plusSlides(-1);
    });

    next.addEventListener('click', () => {
      plusSlides(1);
    });
    
    female.addEventListener('click', () => {
      showSlides(slideIndex);
    });
    
    male.addEventListener('click', () => {
      showSlides(slideIndex);
    });

    function showSlides(n) {
      if (slideIndex > skinSliderItem.length) {
        slideIndex = 1;
      }
      
      if (slideIndex < 1) {
        slideIndex = skinSliderItem.length;
      }
      
      if (female.checked && slideIndex < 4) {
        slideIndex = 4;
      } else if (male.checked && slideIndex > 3) {
        slideIndex = 1;
      }

      for (let i = 0; i < skinSliderItem.length; i++) {
        skinSliderItem[i].style.display = 'none';
      }
      
      skinSliderItem[slideIndex - 1].style.display = 'block';
    }
  };
  
  skinSlider();

 <div class="radio">
  <input value="male" id="male" name="sex" type="radio">
  <label for="sex">Male</label>
  <input value="female" id="female" checked name="sex" type="radio">
  <label for="sex">Female</label>
 </div>
 <div class="custom-style">
<div class="style-text">
 Choose skin color
</div>
<div class="skin">
<div class="prev">
 &lt;
</div>
<div class="skin-color skin-color-1">1</div>
<div class="skin-color skin-color-2">2</div>
<div class="skin-color skin-color-3">3</div>
<div class="skin-color skin-color-4">4</div>
<div class="skin-color skin-color-5">5</div>
<div class="skin-color skin-color-6">6</div>
<div class="next">
 &gt;
</div>
  </div>

顺便说一句，标签元素的 for 属性应使用关联输入的 ID，而不是复选框组的名称。