URL change on a timer in JavaScript

Question

I currently have a image moving on a timer where a new image will appear but what I am trying to implement is a href URL to the image so they can navigate the site.

So this is how I have set up the code.

The code for the image slider works perfectly fine which is

<script type="text/javascript">
    $(function(){
        //prepare Your data array with img urls
        var dataArray=new Array();        <script type="text/javascript">
    $(function(){
        //prepare Your data array with img urls
        var dataArray=new Array();
        dataArray[0]="galleryevenbiggerbiggerversion.png";
        dataArray[1]="galleryevenbiggeraboutversion.png";
        dataArray[2]="galleryevenbiggereventsversion.png";
        //start with id=0 after 5 seconds
        var thisId=0;

        window.setInterval(function(){
            $('#thisImgcentral').attr('src',dataArray[thisId]);
            thisId++; //increment data array id
            if (thisId==3) thisId=0; //repeat from start
        },7800);        
    });
</script>

So, I have tried to use this same concept but changed the src to href hoping for it to work but this is not working.

<script type="text/javascript">
    $(function(){
        //prepare Your data array with img urls
        var dataArray=new Array();
        dataArray[0]="index.php?page=Community";
        dataArray[1]="index.php?page=About";
        dataArray[2]="index.php?page=Events";
        //start with id=0 after 5 seconds
        var thisId4=0;

        window.setInterval(function(){
            $('#thisAddress').attr('href',dataArray[thisId4]);
            thisId4++; //increment data array id
            if (thisId4==3) thisId4=0; //repeat from start
        },7800);    
</script>

Finally, this is how I have laid out the html:

        <a id=thisAddress href=index.php?page=Community><img class=headerimage id=thisImgcentral src=galleryevenbiggerbiggerversion.png></img></a></p>

Why would this be and how would it be possible to make this work?

Answer 1

I created a version for you using plain JavaScript.

Here's the Code:

<script>
var dataArray = [
  "https://s13.postimg.org/fa1p792lv/community.png",
  "https://s13.postimg.org/3wf5w1s37/about.png",
  "https://s13.postimg.org/iuxkqh75f/events.png"
];
var linkArray = [
  "index.php?page=Community",
  "index.php?page=About",
  "index.php?page=Events"
];

var thisId=0;
var image = document.getElementById("thisImgCentral");
image.src = dataArray[thisId];

image.onclick = function() {
  window.location.href = linkArray[thisId];
}

window.setInterval(function(){
  thisId = (thisId+1)%3;
  image.src = dataArray[thisId];
},1000);        
</script>

You can run it here: https://jsfiddle.net/FrancisMacDougall/hpwj1ady/