Display One Text at a Time – knowledgebase JJ

<style>
    .styles_rotating-banner {
        height: 50px;
    }

    .styles_rotating-banner {
        text-align: center;
        display: none;

    }

    .activeClass_Rotation {
        z-index: 1;
        opacity: 1;
        transition-delay: .35s;
        display: block;
    }
</style>

<body>


    <div id="rotating-banner">
        <p class="styles_rotating-banner _msg1" style="background-color: rgb(222, 217, 212); color: rgb(34, 34, 34);">
            <span>New fall arrivals are here.&nbsp;</span>
        </p>
        <p class="styles_rotating-banner _msg2"
            style="background-color: rgb(186, 152, 118); color: rgb(255, 255, 255);">
            <span class="styles_rotating-banner_msg">Timeless details, polished design, round-the-clock
                comfort.&nbsp;</span>
        </p>
        <p class="styles_rotating-banner _msg3" style="background-color: rgb(222, 217, 212); color: rgb(34, 34, 34);">
            <span class="styles_rotating-banner_msg">Best In Class: Dresses You'll Fall For.&nbsp;
            </span>
        </p>
        <p class="styles_rotating-banner _msg4" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
            <span class="styles_rotating-banner_msg">Get early access on launches and
                offers.&nbsp;
            </span>
        </p>
    </div>

    <script>
        const textContainer = document.getElementById('rotating-banner');
        const textItems = textContainer.querySelectorAll('.styles_rotating-banner');
        let currentIndex = 0;

        function displayText() {
            textItems.forEach((item, index) => {
                if (index === currentIndex) {

                    jQuery("._msg" + (index + 1)).addClass("activeClass_Rotation");


                } else {

                    jQuery("._msg" + (index + 1)).removeClass("activeClass_Rotation");
                }
            });

            currentIndex = (currentIndex + 1) % textItems.length;
        }

        // Display the first text item initially
        displayText();

        // Set an interval to cycle through text items (e.g., every x seconds)
        setInterval(displayText, 2000); // Adjust the interval as needed
    </script>
Leave a comment Cancel reply
