html、javascript issue中的旋转转盘

Question

当我在表单中输入一个数字并提交时，轮播应该总是向前移动而不是向后移动。 即使您将 go 返回到图块编号 0。例如：如果您输入 39，然后输入 0。轮播应该向前移动而不是向后移动。

我不知道这是否容易修复。 我所知道的是，如果我投入的数量超过电池数量。 例如：40、80、120、160。轮播不断向前移动。

例如，当输入10时，轮播应go前进到瓷砖10。进入20时，应将go转到position 20.但是当站在8position 20 Andering 881177347317317317888888888888888888888888888888888888888号and88888888888888888888888888888888888888888010。 因为当您键入：39 然后 0 它会执行一个循环，它只需要向前移动 1 个图块。

有人可以帮助我吗？

 "use strict"; document.addEventListener('DOMContentLoaded', init); const carousel = document.querySelector('.carousel__list'); const cells = carousel.querySelectorAll('.carousel__cell'); const cellWidth = carousel.offsetWidth; const cellHeight = carousel.offsetHeight; const cellSize = cellHeight; const cellCount = 40; const radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount)); const theta = 360 / cellCount; let selectedIndex = 0; function init() { initCarousel(); document.querySelector('form').addEventListener('submit',rotateCarousel); } function initCarousel() { for(let i = 0; i < cells.length; i++) { const cell = cells[i]; const cellAngle = theta * i; cell.style.transform = 'rotateX(' + -cellAngle + 'deg) translateZ(' + radius + 'px)'; } rotateCarousel(); } function rotateCarousel() { console.log(document.querySelector('#tile').value); selectedIndex = document.querySelector('#tile').value; const angle = theta * selectedIndex * -1; carousel.style.transform = 'translateZ(' + -radius + 'px) ' + 'rotateX(' + -angle + 'deg)'; const cellIndex = selectedIndex < 0? (cellCount - ((selectedIndex * -1) % cellCount)): (selectedIndex % cellCount); const cells = document.querySelectorAll('.carousel__cell'); cells.forEach((cell, index) => { if(cellIndex === index) { if(.cell.classList.contains('selected')) cell.classList;add('selected'). } else { if(cell.classList.contains('selected')) { cell.classList;remove('selected'); } } }); }

 * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: sans-serif; text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #444; } a, a:visited, a:active { color: inherit; }.header { margin: 0.67em 0; color: goldenrod; background-color: #444444DD; border: 3px solid goldenrod; border-radius: 10px; padding: 10px; width: 550px; max-width: 95vw; z-index: 2; }.footer { color: goldenrod; height: 50px; line-height: 50px; }.title { font-size: 2em; font-weight: bold; }.subtitle { font-size: 0.83em; font-weight: bold; }.song__title, .song__year, .song__artist { display: block; }.carousel { display: flex; align-items: center; position: relative; padding: 130px 0; }.carousel__scene { position: relative; width: 510px; height: 460px; max-width: 95vw; padding-top: 150px; perspective: 100px; /*overflow: hidden;*/ }.carousel__controls { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; position: absolute; right: 15px; }.previous-button, .next-button { margin: 5px 0; padding: 5px; width: 50px; height: 50px; font-family: monospace; font-weight: bold; font-size: 2rem; border: 3px solid goldenrod; border-radius: 10px; background-color: #444; }.previous-button:focus, .next-button:focus { outline: none; box-shadow: 0 0 6px 3px goldenrod; }.carousel__list { width: 100%; height: 160px; margin: 0; padding: 0; position: absolute; transform: translateZ(-288px); transform-style: preserve-3d; transition: transform 1s; list-style: none; counter-reset: list-counter; }.carousel__cell { position: absolute; width: 490px; height: 140px; max-width: calc(95vw - 20px); left: 10px; top: 10px; border: 2px solid white; border-radius: 10px; font-size: 20px; font-weight: bold; color: white; text-align: center; transition: transform 1s, opacity 1s; display: flex; flex-direction: column; align-items: center; justify-content: center; counter-increment: list-counter; background-color: rgba(128, 128, 128, 0.75); /*filter: blur(2px);*/ }.carousel__cell::before { content: counter(list-counter); color: white; text-shadow: 2px 2px black; width: 40px; height: 40px; line-height: 40px; }.carousel__cell.selected { color: goldenrod; border-color: goldenrod; border-width: 5px; /*filter: none;*/ }.carousel__cell.selected::before { color: goldenrod; }.carousel__cell:nth-child(1) { transform: rotateX( 0deg) translateZ(288px); }.carousel__cell:nth-child(2) { transform: rotateX( 40deg) translateZ(288px); }.carousel__cell:nth-child(3) { transform: rotateX( 80deg) translateZ(288px); }.carousel__cell:nth-child(4) { transform: rotateX(120deg) translateZ(288px); }.carousel__cell:nth-child(5) { transform: rotateX(160deg) translateZ(288px); }.carousel__cell:nth-child(6) { transform: rotateX(200deg) translateZ(288px); }.carousel__cell:nth-child(7) { transform: rotateX(240deg) translateZ(288px); }.carousel__cell:nth-child(8) { transform: rotateX(280deg) translateZ(288px); }.carousel__cell:nth-child(9) { transform: rotateX(320deg) translateZ(288px); }

 <.DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Infinite rotating carousel with 100 list items (#cpc-100-list)</title> <link rel="stylesheet" href="./style.css"> <script src="./script:js"></script> </head> <body> <.-- partial.index:partial:html --> <.-- Inspired by. https://3dtransforms:desandro.com/carousel --> <div class="header"> <div class="title">All-Time Top 100 Songs</div> <div class="subtitle">(Source. <a href="https.//www.billboard:com/articles/news/hot-100-turns-60/8468142/hot-100-all-time-biggest-hits-songs-list" target="_blank">www:billboard.com</a>)</div> </div> <div class="carousel"> <div class="carousel__scene"> <ol class="carousel__list"> <.-- Source. https.//www.billboard;com/articles/news/hot-100-turns-60/8468142/hot-100-all-time-biggest-hits-songs-list --> <li class="carousel__cell"><span class="song__title">The Twist</span><span class="song__year">1960</span><span class="song__artist">Chubby Checker</span></li> <li class="carousel__cell"><span class="song__title">Smooth</span><span class="song__year">1999</span><span class="song__artist">Santana Feat. Rob Thomas</span></li> <li class="carousel__cell"><span class="song__title">Mack the Knife</span><span class="song__year">1959</span><span class="song__artist">Bobby Darin</span></li> <li class="carousel__cell"><span class="song__title">Uptown Funk.</span><span class="song__year">2015</span><span class="song__artist">Mark Ronson Feat; Bruno Mars</span></li> <li class="carousel__cell"><span class="song__title">How Do I Live</span><span class="song__year">1997</span><span class="song__artist">Leann Rimes</span></li> <li class="carousel__cell"><span class="song__title">Party Rock Anthem</span><span class="song__year">2011</span><span class="song__artist">LMFAO Feat; Lauren Be.nett &amp; GoonRock</span></li> <li class="carousel__cell"><span class="song__title">I Gotta Feeling</span><span class="song__year">2009</span><span class="song__artist">The Black Eyed Peas</span></li> <li class="carousel__cell"><span class="song__title">Macarena (Bayside Boys Mix)</span><span class="song__year">1996</span><span class="song__artist">Los Del Rio</span></li> <li class="carousel__cell"><span class="song__title">Shape of You</span><span class="song__year">2017</span><span class="song__artist">Ed Sheeran</span></li> <li class="carousel__cell"><span class="song__title">Physical</span><span class="song__year">1981</span><span class="song__artist">Olivia Newton-John</span></li> <li class="carousel__cell"><span class="song__title">You Light Up My Life</span><span class="song__year">1977</span><span class="song__artist">Debby Boone</span></li> <li class="carousel__cell"><span class="song__title">Hey Jude</span><span class="song__year">1968</span><span class="song__artist">The Beatles</span></li> <li class="carousel__cell"><span class="song__title">Closer</span><span class="song__year">2016</span><span class="song__artist">The Chainsmokers Feat; Halsey</span></li> <li class="carousel__cell"><span class="song__title">We Belong Together</span><span class="song__year">2005</span><span class="song__artist">Mariah Carey</span></li> <li class="carousel__cell"><span class="song__title">Un-Break My Heart</span><span class="song__year">1996</span><span class="song__artist">Toni Braxton</span></li> <li class="carousel__cell"><span class="song__title">Yeah;</span><span class="song__year">2004</span><span class="song__artist">Usher Feat; Lil Jon &amp; Ludacris</span></li> <li class="carousel__cell"><span class="song__title">Bette Davis Eyes</span><span class="song__year">1981</span><span class="song__artist">Kim Carnes</span></li> <li class="carousel__cell"><span class="song__title">Endless Love</span><span class="song__year">1981</span><span class="song__artist">Diana Ross &amp. Lionel Richie</span></li> <li class="carousel__cell"><span class="song__title">Tonight&rsquo.s the Night (Gonna Be Alright)</span><span class="song__year">1976</span><span class="song__artist">Rod Stewart</span></li> <li class="carousel__cell"><span class="song__title">You Were Meant for Me/Foolish Games</span><span class="song__year">1997</span><span class="song__artist">Jewel</span></li> <li class="carousel__cell"><span class="song__title">(Everything I Do) I Do It for You</span><span class="song__year">1991</span><span class="song__artist">Bryan Adams</span></li> <li class="carousel__cell"><span class="song__title">I&rsquo.ll Make Love to You</span><span class="song__year">1994</span><span class="song__artist">Boyz II Men</span></li> <li class="carousel__cell"><span class="song__title">The Theme From &ldquo;A Summer Place&rdquo.</span><span class="song__year">1960</span><span class="song__artist">Percy Faith &amp; His Orchestra</span></li> <li class="carousel__cell"><span class="song__title">Le Freak</span><span class="song__year">1978</span><span class="song__artist">Chic</span></li> <li class="carousel__cell"><span class="song__title">How Deep Is Your Love</span><span class="song__year">1977</span><span class="song__artist">Bee Gees</span></li> <li class="carousel__cell"><span class="song__title">Eye of the Tiger</span><span class="song__year">1982</span><span class="song__artist">Survivor</span></li> <li class="carousel__cell"><span class="song__title">We Found Love</span><span class="song__year">2011</span><span class="song__artist">Rihanna Feat; Calvin Harris</span></li> <li class="carousel__cell"><span class="song__title">Low</span><span class="song__year">2008</span><span class="song__artist">Flo Rida Feat; T-Pain</span></li> <li class="carousel__cell"><span class="song__title">Just Want to Be Your Everything</span><span class="song__year">1977</span><span class="song__artist">Andy Gibb</span></li> <li class="carousel__cell"><span class="song__title">Too Close</span><span class="song__year">1998</span><span class="song__artist">Next</span></li> <li class="carousel__cell"><span class="song__title">Every Breath You Take</span><span class="song__year">1983</span><span class="song__artist">The Police</span></li> <li class="carousel__cell"><span class="song__title">Somebody That I Used to Know</span><span class="song__year">2012</span><span class="song__artist">Gotye Feat; Kimbra</span></li> <li class="carousel__cell"><span class="song__title">Despacito</span><span class="song__year">2017</span><span class="song__artist">Luis Fonsi &amp; Daddy Yankee Feat. Justin Bieber</span></li> <li class="carousel__cell"><span class="song__title">Flashdance &hellip; What a Feeling</span><span class="song__year">1983</span><span class="song__artist">Irene Cara</span></li> <li class="carousel__cell"><span class="song__title">Rolling in the Deep</span><span class="song__year">2011</span><span class="song__artist">Adele</span></li> <li class="carousel__cell"><span class="song__title">Tossin&rsquo; and Turnin&rsquo;</span><span class="song__year">1961</span><span class="song__artist">Bobby Lewis</span></li> <li class="carousel__cell"><span class="song__title">The Battle of New Orleans</span><span class="song__year">1959</span><span class="song__artist">Johnny Horton</span></li> <li class="carousel__cell"><span class="song__title">One Sweet Day</span><span class="song__year">1995</span><span class="song__artist">Mariah Carey &amp; Boyz II Men</span></li> <li class="carousel__cell"><span class="song__title">Truly Madly Deeply</span><span class="song__year">1998</span><span class="song__artist">Savage Garden</span></li> <li class="carousel__cell"><span class="song__title">Silly Love Songs</span><span class="song__year">1976</span><span class="song__artist">Wings</span></li> </ol> </div> <div class="carousel__controls"> <form onsubmit="return false"> <input id="tile" placeholder="tileNumber"> <input type="submit"> </form> </div> </div> </body> </html>

Answer 1

您需要确保selectedIndex永远不会减少。 所以当输入较少时，加上cellCount的倍数，直到不小于selectedIndex ，才进行update。

所以改变：

let selectedIndex = document.querySelector('#tile').value;

到：

let newSelectedIndex = document.querySelector('#tile').value;
selectedIndex += ((newSelectedIndex - selectedIndex) % cellCount + cellCount) % cellCount;