javascript - Vanilla JS - slider - 事件点

Question

请您帮我将 .active 类分配给 slider 点，这些点是由 JS 生成的，它们不是 HTML 的一部分。当幻灯片 1 处于事件状态时，我需要点 1 具有类 .active，但没有运气。我找到的所有解决方案都是针对 HTML 中硬编码的点。

我的 HTML:

  <div class="w3-content w3-display-container">
    <div class="w3-display-container mySlides">
        <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 1</h3>
            <p>1. Lorem Ipsum.</p>
        </div>
    </div>
    <div class="w3-display-container mySlides">
        <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 2</h3>
            <p>2.Lorem Ipsum.</p>
        </div>
    </div>
    <div class="w3-display-container mySlides">
        <div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 3</h3>
            <p>3. Lorem Ipsum.</p>
        </div>
    </div>
    <button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
    <div id="js-slider-dots"></div>
    <button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>
  </div>

我的 JS(切换幻灯片并生成点):

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function goToDiv(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

function generateDots() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        var dotNumber = i + 1;
        var dot = document.createElement('span');
        dot.innerHTML =
            '<button class="js-dot" onclick="goToDiv(' + dotNumber + ')">' + dotNumber + '</button>';

        document.getElementById('js-slider-dots').appendChild(dot);

    }
}
generateDots();

它也在 JS Bin 上全部上线:https://jsbin.com/ketohatane/edit?html,js,output

Answer 1

您可以通过.classList.add()和.remove()轻松完成此操作。

只需选择这些点，然后在 showDivs 处激活属于事件幻灯片的点:

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    //get the list of dots
    var y = document.getElementById("js-slider-dots").children;
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
        //remove .active from all dots
        y[i].classList.remove("active")
    }
    x[slideIndex - 1].style.display = "block";
    //add .active to the selected dot
    y[slideIndex - 1].classList.add("active")
}

请参阅此片段:

var slideIndex = 1;

function plusDivs(n) {
	showDivs(slideIndex += n);
}

function goToDiv(n) {
	showDivs(slideIndex = n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//get the list of dots
var y = document.getElementById("js-slider-dots").children;
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    //remove .active from all dots
    y[i].classList.remove("active")
}
x[slideIndex - 1].style.display = "block";
//add .active to the selected dot
y[slideIndex - 1].classList.add("active")
}

function generateDots() {
	var i;
	var x = document.getElementsByClassName("mySlides");
	for (i = 0; i < x.length; i++) {
		var dotNumber = i + 1;
		var dot = document.createElement('span');
		dot.innerHTML =
			'<button class="js-dot" onclick="goToDiv(' + dotNumber + ')">' + dotNumber + '</button>';

		document.getElementById('js-slider-dots').appendChild(dot);

	}
}
generateDots();
//placed AFTER generateDots()
showDivs(slideIndex);

/* Just for illustration */
.active{outline:solid 1px red;}

  <div class="w3-content w3-display-container">
	<div class="w3-display-container mySlides">
		<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
			<h3>Slide 1</h3>
			<p>1. Lorem Ipsum.</p>
		</div>
	</div>
	<div class="w3-display-container mySlides">
		<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
			<h3>Slide 2</h3>
			<p>2.Lorem Ipsum.</p>
		</div>
	</div>
	<div class="w3-display-container mySlides">
		<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
			<h3>Slide 3</h3>
			<p>3. Lorem Ipsum.</p>
		</div>
	</div>
	<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
	<div id="js-slider-dots"></div>
	<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>
  </div>