refreshing a div content in 10 sec in wordpress website

Question

I am using WordPress. I need to refresh a div every 10 seconds. The content of the div is a shortcode, which has an image from an array.

The div name is header_image and the code to create shortcode is present in functions.php

So added this code and nothing works

 <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
        $(document).ready(function(){
            setInterval(function() {
                $(".header_image").load("functions.php");
            }, 1000);
        });

    </script>

Content of div

<div class="header_image">
    <a href="<?php echo $data[0]; ?>">
<img  src="<?php echo $data[1]; ?>">
</a>
</div>

Answer 1

If browser return 404 Not found, you should use absolute path instead of relative path.

Example: if your functions.php file is in /wp-content/themes/theme-name/functions.php, the correct code should be:

$(".header_image").load("/wp-content/themes/theme-name/functions.php");

Answer 2

This solved the issue.Added JS to the function and used setinterval to change images in every 10 sec

<script>
var $image_square = <?php echo json_encode($image_array_square); ?>;
var $link_square =<?php echo json_encode($link_array_square); ?>;
        var i = 0;
        var renew = setInterval(function(){
            if(links.length == i){
                i = 0;
            }
            else {
            document.getElementById("squareImage").src = $image_square[i]; 
            document.getElementById("squareLink").href = $link_square[i]; 
            i++;

        }
        },10000);
        </script>
//To display the first image in the website,taking the 2nd image from array/

<div class="square_image">
<a id="squareLink" href="<?php echo $link_array_square[2]; ?>" onclick="void window.open(this.href); return false;">
<img id="squareImage" src="<?php echo $image_array_square[2]; ?>" >
</a>
</div>
</div>