27.12.2022 | Webentwicklung
JQuery Text und Cover Changer

Für eine Freundin habe ich letztens eine kleine JavaScript Funktion benötigt um per Zufall und nach Timeout kleine Texte auszugeben. Mit JQuery und JavaScript ist das recht schnell und unkompliziert zu machen. Die Funktion hält ein paar kleine Textschnipsel vor und gibt diese nach zwei Sekunden im Wechsel aus. Initial wird die Funktion via $(document).ready() geladen und nach erfolgtem Durchlauf wird sie erneut mit Timeout aufgerufen.

<div id="texte"></div>


<script type="text/javascript">

    function changeText($step) {

        if($step <= 1) {
            $step = $step+1;
        }
        else {
            $step = 0;
        }

        var texts           = Array("Text 1", "Text 2", "Text 3");
        var timeouts        = ["2000"];
        var randomTimeout   = timeouts[Math.floor(Math.random()*timeouts.length)];

        document.getElementById('texte').innerHTML = texts[$step];

        setTimeout(function () {
            changeText($step);
        }, randomTimeout);
    }

    $(document).ready(function(){
        setTimeout(function () {
            changeText(0);
        }, 2000);
    });

</script>

Eine weiteres Bedürfnis war ein zeitgesteuerter Austausch von Bildern. Hier kommt eine ganz ähnliche Funktion zum Einsatz. Nur das hier via jQuery die entsprechende Bildresource ausgetauscht wird.

<img src="1010_0.jpg" id="#header">


<script type="text/javascript">

    function changeCover($step) {

        if($step <= 1) {
            $step = $step+1;
        }
        else {
            $step = 0;
        }

        var covers          = Array("1010.jpg","1010_2.jpg","1010_3.jpg");
        var timeouts        = ["1000"];
        var randomTimeout   = timeouts[Math.floor(Math.random()*timeouts.length)];

        // console.log(randomTimeout);

        jQuery("#header").attr("src", covers[$step]);

        setTimeout(function () {
            changeCover($step);
        }, randomTimeout);
    }

    $(document).ready(function(){
        setTimeout(function () {
            changeCover(0);
        }, 2000);
    });
    
</script>