<div id="leftbox">
<p id="leftpopis"> Whats new on the web? </p>
<img src="obrazky/0.png" id="imgDemo" >
<button onclick="prvs()" id="btnTwo"> <img src="obrazky/left.png"/>
</button>
<button onclick="nxt()" id="btnOne"> <img src="obrazky/right.png"/>
</button>

<script>
var img = new
Array("obrazky/0.png","obrazky/1.png","obrazky/2.png","obrazky/3.png");

var imgElement = document.getElementById("imgDemo");
var i = 0;
var imgLen = img.length;

    function nxt()
    {
        if(i < imgLen-1)
            {
                i++;
            }
        else{
                i=0;
            }

            imgElement.src = img[i];
    }

    function prvs()
    {
        if(i > 0)
            {
                i--;
            }
        else
        {
            i = imgLen-1;
        }
            imgElement.src = img[i];
    }

var img = new Array Array("<a href="comments.html"> obrazky/0.png"</a>);

var img = new Array("<a href="comments.html"> obrazky/0.png"</a>);

var img = new Array("<a href='comments.html'> obrazky/0.png</a>");

var img = new Array(`<a href="comments.html"> obrazky/0.png</a>`);

[{img: "obrazky/0.png", url: "comments.html"}, {...}, {...}]

imgElement.src   = img[i.img];
linkElement.href = img[i.url];

var img = [ {link='xxx', src="obrazky/0.png"}, {link='yyy' src="obrazky/1.png"},... ]

<a id='imgDemoLink'> <img id='imgDemo'></a>

imgElement.src = img[i.src];

var aElement = document.getElementById("imgDemoLink");
aElement.href = img[i.link]

var img = [
    {
        "img": "obrazky/0.png",
        "href": "comments.html",
    },
    {
        "img": "obrazky/0.png",
        "href": "comments.html",
    }
];

<a href="" id="imageAnchor"><img id="imgDemo" src=""></a>

document.getElementById("imageAnchor").href = img[i].href;
document.getElementById("imgDemo").src = img[i].img;

<ul id="images">
    <li class='active'><a href="comments.html"><img src="obrazky/2.png"></a></li>
    <li><a href="comments.html"><img src="obrazky/1.png"></a></li>
    <li><a href="comments.html"><img src="obrazky/0.png"></a></li>
</ul>

<style>
    ul#images {
        margin:0px;
        padding:0px;
        list-style-type:none;
    }
    ul#images li {
        display:none;
    }
    ul#images li:first-child,
    ul#images li.active {
        display:block;
    }
</style>

<script>
     imageContainer = document.getElementById("images");

     document.getElementById("btnOne").addEventListener(function(event) {
         event.preventDefault();
         //do magic here.
         //been a while since I've touched vanilla so give me a minute :d
         //basically what you need to do here is cycle through the nodes,
         //find the active one, if there is a nextSibling of .active:
         // set nextSibling.class ='active' and the current element remove active
         for(var i=0; i < imageContainer.childNodes.length; i++) {
             if (imageContainer.childNodes[i].className == 'active') {
                  if (imageContainer.childNodes[i].nextSibling !== 'undefined') {
                      imageContainer.childNodes[i].nextSibling.className = 'active';
                      imageContainer.childNodes[i].className = '';
                  }
              }
         }
     };

     //Notice this function is similar and I've replaced nextSibling with Previous for the opposite direction

     document.getElementById("btnTwo").addEventListener(function(event) {
         event.preventDefault();

         for(var i=0; i < imageContainer.childNodes.length; i++) {
             if (imageContainer.childNodes[i].className == 'active') {
                  if (imageContainer.childNodes[i].previousSibling !== 'undefined') {
                      imageContainer.childNodes[i].previousSibling.className = 'active';
                      imageContainer.childNodes[i].className = '';
                  }
              }
         }

</script>

<script>
var img = new Array("obrazky/0.png", "obrazky/1.png", "obrazky/2.png", "obrazky/3.png");
//add this array for urls
var urls = new Array("example1.com", "example2.com", "example3.com", "example4.com");

var imgElement = document.getElementById("imgDemo");
var i = 0;
var imgLen = img.length;

function nxt()
{
    if(i < imgLen-1)
        {
            i++;
        }
    else{
            i=0;
        }

        imgElement.src = img[i];
        //add click event to redirect
     document.getElementById("imgDemo").addEventListener("click", function(){
         window.location.href = urls[i];
     });
}

function prvs()
{
    if(i > 0)
        {
            i--;
        }
    else
    {
        i = imgLen-1;
    }
        imgElement.src = img[i];
     //add click event to redirect
     document.getElementById("imgDemo").addEventListener("click", function(){
         window.location.href = urls[i];
     });
}
</script>