Texte défilant jQuery

Hello

Alors pour ce genre de choses pas besoin de librairie tu peux faire un script tout simplement ^^

/* HTML */
<div id="text-container">
    <p id="text-1" class="hidden">
        Texte
    </p>

    <p id="text-2" class="hidden">
        Texte
    </p>

    <p id="text-3" class="hidden">
        Texte
    </p>

    <p id="text-4" class="hidden">
        Texte
    </p>

    <!-- ... -->
</div>

/* CSS */
.hidden {
    display: none;
}

/* JS */
const container = document.getElementById('text-container')
const elements = container.children

let current = 0

async setInterval(switchText, 3000) /* Texte qui disparait/apparait toutes les 3secondes */

async function switchText() { // Async pour que chaque process attende son tour
    await hide() // On passe le précédent en display none
    await show() // On affiche le texte actuel

    if (current === elements.length) {
        current = 0 // On repasse la boucle a zéro
    }
}

function hide() {
    let target = current > 0 ? current - 1 : current.length // On définit le bon index

    if (!elements[target].classList.contains('hidden')) { // Pour gérer la première loop
        elements[target].classList.add('hidden')
    }
}

function show() {
    elements[current++].classList.remove('hidden')
    // current++, ça te donne la valeur du current et ensuite ça incrémente de 1
    // Si tu veut que current s'incrémente de 1 et ENSUITE avoir la valeur de current après incrémentation faut faire ++current
    // Normalement ++current mais je le dis au cas où tu dois ajuster avec ++current ^^
}

/* Si la première loop se déclenche immédiatement tu peux mettre l'interval dans un timeout */

setTimeout(switchText, 3000) // Déclenchement dans 3secondes

Grosso merdo, faudra ajuster selon les bugs mais dans l'idée ça devrait te faire ton intervale :p

Je teste demain, merci beaucoup! Je ne suis pas formé en js malheureusement alors impossible pour moi de réaliser des scripts comme ceci.

Dernier petit soucis que je n'ai pas précisé, comment arrêter le message quand on passe la souris dessus (histoire de cliquer si je met un lien hypertexte dedans :D)

Merci en tout cas pour l'aide

Avec plaisir ^^

Ah oui il faudrait que tu apprennes un peu les bases de js pour comprendre, firefox a fait une doc assez complete pour ca https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics ensuite c'est comme des dominos à assembler avant de pousser le premier domino :p et pour les utilistaires (comme setinterval/setimout) tu recherche comment faire telle ou telle chose en JS et tu vois ce que Javascript propose :p

Pour arreter alors tu peux ajouter un event (ah du coup faudrait que tu apprenne les events :p):

/* JS */
const container = document.getElementById('text-container')
const elements = container.children

let current = 0

let switchInterval = setInterval(switchText, 3000) /* Texte qui disparait/apparait toutes les 3secondes */

async function switchText() { // Async pour que chaque process attende son tour
    await hide() // On passe le précédent en display none
    await show() // On affiche le texte actuel

    if (current === elements.length) {
        current = 0 // On repasse la boucle a zéro
    }
}

function hide() {
    let target = current > 0 ? current - 1 : current.length // On définit le bon index

    if (!elements[target].classList.contains('hidden')) { // Pour gérer la première loop
        elements[target].classList.add('hidden')
    }
}

function show() {
    elements[current++].classList.remove('hidden')
    // current++, ça te donne la valeur du current et ensuite ça incrémente de 1
    // Si tu veut que current s'incrémente de 1 et ENSUITE avoir la valeur de current après incrémentation faut faire ++current
    // Normalement ++current mais je le dis au cas où tu dois ajuster avec ++current ^^
}

/**
* Tu prends tous les elements dans le container, tu fait une boucle avec un map, ça va déclencher une action à chaque élements un par un
* A chaque fois que le map passe sur un élement, il enregistre l'élement dans le paramètre "element", et y applique un event "mouseOver" (passage de la souris)
* Quand le mouseOver est déclenché tu lance un utilitaire JS "stopInterval" et en paramètre tu met le nom de l'intervale
* Et comme le stopInterval a besoin d'un nom, tu doit enregistrer l'interval dans une variable comme fait plus haut
*/
elements.map((element) => element.addEventListener('mouseOver', stopInterval(switchInterval)))

Bonjour,

encore Merci, je viens de tester le code malheureusement, cela ne fonctionne pas...:( Rien n'apparait, et j'ai inclus bien sur les librairies (elles fonctionnent j'ai testé un alert() ).
C'est bizarre...

ah, fait voir ton html css et js?

Serait-il possible de mettre le code que tu as fait sur codepen.io, ce sera plus simple car je suis vraiment une bille et j'ai surement oublié quelque chose...:d j'ai pris tout ton code et c'est sur que c'est moi qui ai merdé! :(

Merci beaucoup! J'ai mis en résolu!

avec plaisir ;)