我有一个带有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>
任何帮助将不胜感激。
答案 0 :(得分:0)
我认为这大致可以满足您的需求。不幸的是,滑块在向右移动时会“环绕”,而在向左移动时只会在下限处停止。但是,我会将其留给您作为额外的挑战。 :-)
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">
<
</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">
>
</div>
</div>
顺便说一句,标签元素的for
属性应使用关联输入的ID,而不是复选框组的名称。