html、javascript issue中的旋转转盘

Question

When I put in a number in the form and submit, the carousel should always move forward and never backwards. Even if you go back to tile number 0. For instance: if you put in 39, and then 0. The carousel should move forward and not backwards.

I don't know if this is easy to fix. What I do know is that if I put in more than the cell amount. For instance: 40, 80, 120, 160. The carousel keeps moving forward.

For example when entering 10, the carousel should go forward to tile 10. When entering 20 is should go forward to position 20. But when standing on position 20 and entering position 10 it should go forward and do a loop forwards, not backwards. Because when you type: 39 and then 0 it does a loop and it just needs to move forward 1 tile.

Somebody who can helps me?

 "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

You'll need to make sure that selectedIndex never decreases. So when the input is less, add multiples of cellCount until it is not less than selectedIndex and only then make the update.

So change:

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

to:

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