Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv2/övningar/js_array/

js_array_1.html
js_array_2.html
js_array_3.html
js_array_4.html
js_array_5.html
js_array_6.html

`js_array_2.html`

45 lines UTF-8 Windows (CRLF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS Array 2</title>

</head>

<body>

<h1>JS Array 2</h1>

<button onclick="myFunction()">Växla bild</button>

<button onclick="autoplayToggle()">Autoplay = ON</button>

<br>

<img style="width: 300px; height: 300px;" src="https://media.giphy.com/media/3oKIPnAiaMCws8nOsE/giphy.gif" alt="växlande kattbild">

</body>

<script>

    let img = document.querySelector("img");

    let imgArray = ["https://media.giphy.com/media/3oKIPnAiaMCws8nOsE/giphy.gif",

        "https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg",

        "https://static.wikia.nocookie.net/find-the-binguses/images/2/2f/Bingus.png",

        "https://i1.sndcdn.com/avatars-jyyWDUyElUJzWlJ0-9kEMig-t240x240.jpg"];

    let i = 0;



    let timer = setInterval(myFunction, 2000);



    function myFunction() {

        if (i < imgArray.length - 1) {

            i++;

            img.src = imgArray[i];

        } else {

            i = 0;

            img.src = imgArray[i];

        }

    }



    function autoplayToggle() {

        if (timer) {

            clearInterval(timer);

            timer = null;

            document.querySelector("button:nth-of-type(2)").textContent = "Autoplay = OFF";

        } else {

            timer = setInterval(myFunction, 2000);

            document.querySelector("button:nth-of-type(2)").textContent = "Autoplay = ON";

        }

    }

</script>

</html>