Je veux changer le contenu de la div avec deux boutons. Vous recherchez une solution JavaScript pure. De plus, j'aimerais avoir une fonction de lecture automatique qui modifie le contenu toutes les 2 secondes. Lorsque l'un des boutons est cliqué, la fonction AutoPlay doit s'arrêter.
Maintenant, j'ai réussi à le faire avec le code "médiocre" et sans fonction de lecture automatique. Peut-être que quelqu'un ici connaît une meilleure façon de faire cela? P>
p>
<div id="change"></div> <button id="button1">Button 1</div> <button id="button2">Button 2</div>
3 Réponses :
Il suffit d'ajouter une classe dire, p> orange code> dans votre CSS qui définit l'arrière-plan en orange. Vous pouvez maintenant simplement utiliser setInterval () Méthode Pour basculer la classe orange code> sur la DIV toutes les 2 secondes, puis utilisez ClearInterval () code> pour annuler l'intervalle lorsque l'un des boutons est cliqué et maintenant basculer la classe Orange en fonction de Cliquez à la place.
<div id="change"></div>
<button id="button1">Button 1</div>
<button id="button2">Button 2</div>
Ceci peut être atteint à l'aide d'un intervalle défini () et peut être arrêté à l'aide de ClearInterval ()
Voici l'exemple de code
Voici l'exemple de travail https://jsfiddle.net/arpit09/dkz20b61/16/ < / a> var chronomètre
minuterie = seinterval (fonction () {
Changer.style.background = "bleu";
}, 2000);
ClearInterval (minuterie);
Donc, il semble que vous voulez une sorte de carrousel.
L'exemple suivant ci-dessous vous permet de revenir en arrière ou de transmettre le contenu et a également la capacité de progresser automatiquement. P>
Vos vues Devrait être détenu dans un type de données de tableau / liste. P>
Enfin, j'utiliserais des cours plutôt que des identifiants. Cela rend le code plus extensible. Cela pourrait être modifié ultérieurement pour créer un plugin, si désiré. P>
p>
<div class="container">
<div class="viewport"></div>
<div class="btn-container">
<button class="btn-prev">Prev</button>
<button class="btn-auto">Auto</button>
<button class="btn-next">Next</button>
</div>
</div>
Basculer une classe serait plus efficace et plus facile.