27.12.2022 | Webentwicklung
JQuery Text und Cover Changer

geschrieben von Jens , ,

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>

 


Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Mit und gemacht in Kassel 2014 - 2023