Je construis un simple curseur et je ne peux pas pour la vie de moi comprendre pourquoi mes points sont toujours un pas en arrière, si je fais quelque chose pour le changer avec un simple + 1 cela jette ma boucle de curseur, voir stylo, cela aura plus de sens.
https://codepen.io/flashvenom/pen/RwborBy
Cela fonctionne mais toujours 1 pas derrière
counter++; counterPlus = 1 + counter; dots.querySelector("ul li:nth-child(" + counterPlus + ")").classList.add("dwAccT--active");
Celui-ci les points fonctionnent mais jette ensuite la boucle du curseur
counter++; dots.querySelector("ul li:nth-child(" + counter + ")").classList.add("dwAccT--active");
3 Réponses :
Essayez ceci
function dwAutoPlay(counter) { // When counter == 0, the first photo will show 2 cycle, so make it 1500, // which is half of 3000 const delay = counter === 0 ? 1500 : 3000 if (counter < totalTiles && playing === true) { counter++ // Because the first photo don't need to change, while counter == 1, so here // must -1 so it can be same position with dot. dwAccUl.style.transform = `translateX(-${counter - 1}00%)` dots.querySelector(".dwAccT--active").classList.remove("dwAccT--active") dots .querySelector(`ul li:nth-child(${counter})`) .classList.add("dwAccT--active") } else if (counter == totalTiles && playing === true) { counter = 0 dwAccUl.style.transform = "translateX(0%)" // Add these 2 lines code to make active dot be correct postion while // photo from last one to first one dots.querySelector(".dwAccT--active").classList.remove("dwAccT--active") dots.querySelector(`ul li:nth-child(${1})`).classList.add("dwAccT--active") } setTimeout(function() { dwAutoPlay(counter) }, delay) }
Veuillez décrire dans votre réponse, quel était le problème et comment cet extrait de code le résoudra-t-il, pour aider les autres à comprendre cette réponse
Je simplifie votre fonction dwAutoPlay
en
<!-- START SLIDER --> <div id="dwAcc"> <div id="dwAccUl"> <div class="dwAccLi" style="background: #507f70 url('https://source.unsplash.com/1600x900/?mountains') no-repeat 0 0; background-size: cover;"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg=="> </div> <div class="dwAccLi" style="background: #6bb8ab url('https://source.unsplash.com/1600x900/?surf') no-repeat 0 0; background-size: cover;"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg=="> </div> <div class="dwAccLi" style="background: #a49c85 url('https://source.unsplash.com/1600x900/?city') no-repeat 0 0; background-size: cover;"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg=="> </div> <div class="dwAccLi" style="background: #d25d00 url('https://source.unsplash.com/1600x900/?sky') no-repeat 0 0; background-size: cover;"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg=="> </div> <div class="dwAccLi" style="background: #d25d00 url('https://source.unsplash.com/1600x900/?sand') no-repeat 0 0; background-size: cover;"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg=="> </div> </div> <div id="dots"></div> </div> <!-- END SLIDER -->
/*reset*/ html {box-sizing: border-box; overflow-y:scroll;} *, *:before, *:after {box-sizing: inherit; } body{background: #000; color: #fff; font-family: sans-serif; font-weight:300;font-size:100%; margin:0;opacity:1;padding:0;transition:1s opacity;overflow-x: hidden; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%; } a:focus,button:focus,input:focus,textarea:focus,:focus {outline: none;} h1,h2,h3,h4,h5,h6, ul, li, p{margin: 0; padding: 0; -webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-margin-start: 0px;-webkit-margin-end: 0px; text-align: left;} #app { width: 100%; height: 100%; } /*reset end */ #dwAcc{ display: block; float: left; overflow: hidden; position: relative; max-height: 100vh; width: 100%; } #dwAccUl{ display: flex; flex-wrap: nowrap; margin: 0 auto; padding: 0; transform: translateX(0); transition: all ease-in-out 0.5s; width: auto; } .dwAccLi{ flex: 0 0 auto; margin: 0; padding: 0; overflow: hidden; width: 100%; } .dwAccLi img { height: auto; width: 100%; } #dots ul{display: block; position: absolute; left: 2em; bottom: 1em; z-index: 1000; width: 320px; margin: 0; padding: 1em 0; list-style-type: none;} #dots li{background: transparent; border: 2px solid #000; border-radius: 100%; display: block; float: left; height: 10px; margin: 0 10px 0 0; padding: 0; transition: all ease 0.3s; width: 10px;} #dots li.dwAccT--active{background: #000;}
const accordion = document.getElementById("dwAcc"); const dwAccUl = document.getElementById("dwAccUl"); let playing = true; let tiles = accordion.getElementsByClassName("dwAccLi"); let totalTiles = tiles.length; console.log(totalTiles) const dots = document.getElementById("dots"); let firstActive = accordion.firstElementChild; //add initial active class to first slide firstActive.classList.add("dwAccT--active"); //click dot to slide function createHandler(n) { return function() { playing = false; //If active class exists if (document.querySelector(".dwAccT--active") !== null) { //remove active class from all instances document.querySelector(".dwAccT--active").classList.remove("dwAccT--active"); } //add active class to current dot this.classList.add("dwAccT--active"); //animate to slide position dwAccUl.style.transform = "translateX(-" + n + "00%)"; }; } //create dots const createDotsUl = document.createElement("ul"); //Append ul to #dots dots.appendChild(createDotsUl); //For each tile add click event listener and create a dot for (let i = 0; i < tiles.length; i++) { //create a dot let createDotsLi = document.createElement("li"); //reference created dot let createdDot = createDotsUl.getElementsByTagName("li"); //append the created dot to the parent ul createDotsUl.appendChild(createDotsLi); //remove existing active class from all dots document.querySelector(".dwAccT--active").classList.remove("dwAccT--active"); //add inital active class to first dot document.querySelector("#dwAcc ul li:nth-child(1)").classList.add("dwAccT--active"); //add event handler createdDot[i].addEventListener("click", createHandler(i)); } //autoplay function //start a counter function dwAutoPlay(counter){ if(playing !== true) return; setTimeout(function(){ counter++; dwAccUl.style.transform = "translateX(-" + counter%totalTiles + "00%)"; dots.querySelector(".dwAccT--active").classList.remove("dwAccT--active"); dots.querySelector("ul li:nth-child(" + (1+counter%totalTiles) + ")") .classList.add("dwAccT--active"); dwAutoPlay(counter); }, 3000); } //initialize autoplay start dwAutoPlay(0+0);
function dwAutoPlay(counter){ if(playing !== true) return; setTimeout(function(){ counter++; dwAccUl.style.transform = "translateX(-" + counter%totalTiles + "00%)"; dots.querySelector(".dwAccT--active").classList.remove("dwAccT--active"); dots.querySelector("ul li:nth-child(" + (1+counter%totalTiles) + ")") .classList.add("dwAccT--active"); dwAutoPlay(counter); }, 3000); }
Très bon travail là-bas Kamil & Jaromanda, mon plan était de le décomposer un peu plus une fois que j'aurais surmonté ce petit problème, mais vous avez fait un aussi bon travail que je peux l'imaginer, je vais utiliser ce poste pour référence future, ce serait bien pour voir si quelqu'un peut obtenir cette fonction plus petite, je fais de mon mieux, mais je doute que je ne le batte de beaucoup.
comment fonctionne cette ligne --- counter = (counter + 1)% total Tiles; Je ne comprends pas tout à fait ce que fait le%
Désolé a changé la bonne réponse à Jaromanda ci-dessous car la vôtre est bonne mais suppose qu'il y a 5 diapositives
@Dubcode Je change 5
en totalTiles
- c'est maintenant plus général. L '%
est une opération modulo à partir de n'importe quel nombre, il donne des valeurs à partir de 0 to totalTimes-1 (de manière circulaire)
Simplifié et corrigé en utilisant l'arithmétique modulo
function dwAutoPlay(counter){ if (playing) { counter = (counter + 1) % totalTiles; setTimeout(function(){ dwAccUl.style.transform = "translateX(-" + counter + "00%)"; dots.querySelector(".dwAccT--active").classList.remove("dwAccT--active"); dots.querySelector("ul li:nth-child(" + (counter + 1) + ")").classList.add("dwAccT--active"); dwAutoPlay(counter); }, 3000); } } dwAutoPlay(0);
Merci, je pense que vous et le gars ci-dessus avez tous les deux trouvé un code très similaire et impressionnant en un rien de temps, beau travail, très apprécié
Désolé, cela a changé pour corriger la réponse car la réponse dynamique de Kamils suppose qu'il y a 5 diapositives
Je pensais avoir compris ce problème, mais je suis tombé sur un autre problème similaire mais étrange. alors que si j'essaye de répéter la même fonction active pour qu'elle ajoute un état actif aux diapositives, j'obtiens des erreurs en utilisant exactement la même fonction, voir ce code pen codepen.io/flashvenom/full/WNeoRJd et ce message stackoverflow.com/questions/57587403/...