使用帶有可點擊箭頭的vanilla JS創建文本滑塊

Question

我想我需要在某處使用循環，但我不確定如何將其轉換為我的代碼，所以如果有人可以幫助我，我將不勝感激。

我有3塊文本要顯示，同時使用兩個箭頭在文本之間切換。 我想我應該使用“display：none”來表示我目前沒有顯示的2個文本塊。

我也意識到我應該使用某種與我擁有的文本塊數量相關的循環，但是我無法將其轉換為我的代碼，因為我還是比較新的。

我可以為每個文本塊創建變量，然后將它們添加到數組中（甚至不確定是否允許）。 之后我會評估數組的.length以使箭頭單擊。 如果有人可以幫助我，我將非常感激！ 如果只能在常規JS中給出答案，我也將不勝感激。

這是codepen： https ：//codepen.io/ItzaMi/pen/ZPMXYw

 var scrollArrowRight = document.getElementById("scroll-arrow-right"); var scrollArrowLeft = document.getElementById("scroll-arrow-left"); var par1 = document.getElementById("p-1"); var par2 = document.getElementById("p-2"); var par3 = document.getElementById("p-3"); var slider = [par1, par2, par3]; scrollArrowRight.onclick = function() { par2.style.display = "block"; par1.style.display = "none"; } scrollArrowLeft.onclick = function() { par2.style.display = "none"; par3.style.display = "block"; } 

 #scroll-join { display: flex; justify-content: center; align-content: center; align-items: center; flex-direction: row; } .scroll-arrow { margin: 0 0.6em; font-size: 1.4em; } #p-2 { display: none; } #p-3 { display: none; } 

 <div id="scroll-join"> <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left"></i> <p class="join-p" id="p-1">WLorem ipsum dolor sit amet.</p> <p class="join-p" id="p-2">Lorem ipsum dolor sit amet</p> <p class="join-p" id="p-3">WLorem ipsum dolor sit amet.</p> <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right"></i> </div> 

Answer 1

可以通過設置一個實現文本滑塊active類用於當前有源元件，以及在此基礎上元素作為顯示下一/前一個元素active被點擊箭頭時。 我寫了一個有這個想法的工作實例：

 var scrollArrowRight = document.getElementById("scroll-arrow-right"); var scrollArrowLeft = document.getElementById("scroll-arrow-left"); scrollArrowRight.onclick = function() { // get current active element var active = document.querySelector(".active"); // add active class to next sibling active.nextElementSibling.classList.add("active"); // get all active elements var allActive = document.querySelectorAll(".active"); // remove active class from first element allActive[0].classList.remove("active"); } scrollArrowLeft.onclick = function() { // get current active element var active = document.querySelector(".active"); // add active class to previous sibling active.previousElementSibling.classList.add("active"); // get all active elements var allActive = document.querySelectorAll(".active"); // remove active class from second element allActive[1].classList.remove("active"); } 

 #scroll-join { display: flex; justify-content: center; align-content: center; align-items: center; flex-direction: row; } .scroll-arrow { margin: 0 0.6em; font-size: 1.4em; } .join-p { display: none; } .active { display: block; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <div id="scroll-join"> <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left"></i> <div> <p class="join-p active">1 Lorem ipsum dolor amet.</p> <p class="join-p">2 Lorem ipsum dolor sit amet</p> <p class="join-p">3 Lorem ipsum dolor sit amet</p> </div> <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right"></i> </div> 

希望有助於您入門！

Answer 2

這是您可以實現滑塊的另一種方式。 定義“當前索引”，在幻燈片之間單擊時會更新該索引。 由於你正在使用一系列幻燈片，我認為這會更合適一些。

 var scrollArrowRight = document.getElementById("scroll-arrow-right"); var scrollArrowLeft = document.getElementById("scroll-arrow-left"); var par1 = document.getElementById("p-1"); var par2 = document.getElementById("p-2"); var par3 = document.getElementById("p-3"); var slider = [par1, par2, par3]; var currentIndex = -1; //On load, show the first slide loadPage(0); function loadPage(i) { //Check if index is valid if (slider[i]) { slider[i].removeAttribute('hidden'); } else { return; } //Hide previous slide if (slider[currentIndex]) { slider[currentIndex].setAttribute('hidden', ''); } currentIndex = i; } scrollArrowRight.onclick = function() { loadPage(currentIndex + 1); } scrollArrowLeft.onclick = function() { loadPage(currentIndex - 1); } 

 #scroll-join { display: flex; justify-content: center; align-content: center; align-items: center; flex-direction: row; } .scroll-arrow { cursor: pointer; margin: 0 0.6em; font-size: 1.4em; } 

 <div id="scroll-join"> <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left">←</i> <p class="join-p" id="p-1" hidden>WLorem ipsum dolor sit amet.</p> <p class="join-p" id="p-2" hidden>Lorem ipsum dolor sit amet</p> <p class="join-p" id="p-3" hidden>WLorem ipsum dolor sit amet.</p> <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right">→</i> </div> 

Answer 3

 const [arrowLeft, arrowRight] = document.querySelectorAll(".container .arrow"); const textBoxes = document.querySelectorAll(".text-box"); textBoxes.howFarTranslated = -100; function handleArrowClick() { if (this === arrowLeft && textBoxes.howFarTranslated > -200) { textBoxes.howFarTranslated -= 100; } else if (this === arrowRight && textBoxes.howFarTranslated < 0) { textBoxes.howFarTranslated += 100; } arrowLeft.disabled = textBoxes.howFarTranslated === -200; arrowRight.disabled = textBoxes.howFarTranslated === 0; textBoxes.forEach( textBox => (textBox.style.transform = `translateX(${textBoxes.howFarTranslated}%)`) ); } [arrowLeft, arrowRight].forEach(arrow => arrow.addEventListener("click", handleArrowClick) ); 

 body { margin: 0; padding-top: 64px; } body, body * { box-sizing: border-box; } .container { display: flex; width: 50%; height: 54px; min-width: 320px; margin: auto; } .container .arrow { flex: 1; min-width: 64px; border: none; border-radius: 6px; cursor: pointer; outline: none; } .container .arrow:hover:not([disabled]) { box-shadow: 0 2px 8px #666; } .container .arrow:active { transform: scale(0.95); } .container .arrow[disabled] { opacity: 0.25; cursor: initial; } .container .display-box { flex: 5; font-size: 0; white-space: nowrap; overflow: hidden; } .container .display-box .text-box { position: relative; z-index: -1; display: inline-flex; width: 100%; height: 100%; text-align: center; transform: translateX(-100%); transition: transform 333ms linear; } .container .display-box .text-box p { margin: auto; font-size: 24px; } 

 <div class="container"> <button class="arrow left-arrow"><</button> <div class="display-box"> <div class="text-box text-0"> <p>Text 0 text 0 text 0 text 0</p> </div> <div class="text-box text-1"> <p>Text 1 text 1 text 1 text 1</p> </div> <div class="text-box text-2"> <p>Text 2 text 2 text 2 text 2</p> </div> </div> <button class="arrow right-arrow">></button> </div>