HWcarouselSimple.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>carouselSimple</title>
    <link rel="stylesheet" type="text/css" href="carouselSimple.css">
</head>
<body>
    <img src="" style="height: 5em">
    <button onclick="nextImage()">Next Image</button>
</body>
<script type="text/javascript">
    # get image node:
    var imgNode =  document.querySelector("img");


    var imgURLs = [
        "http://imageshack.com/a/img922/3858/5Pd5dc.jpg",
        "http://imageshack.com/a/img923/3776/lKVbAp.jpg",
        "http://imageshack.com/a/img923/6770/WXkPF9.jpg",
        "http://imageshack.com/a/img923/2200/SzDjvi.jpg",
        "http://imageshack.com/a/img924/8715/tz0p3T.jpg",
    ];

    // set img src with first imgURLs
    imgNode.setAttribute("src", imgURLs[0]);


    // set next image url to "src" attribute
    var i = 0;
    function nextImage(){
        imgNode.setAttribute("src", imgURLs[i]);

        //TASK1: make i to start from 0, after the last URL is used:
        i = i +1;
    }

    // TASK 2:
    // implement prevImage() function, which will set the previous image url to "src" attribute

</script>
</html>