Image will change when refresh the page and also every images will have an individual link

Image changes when the page refreshes and I am accomplishing this but I can't add individual image links. how can I do it? Please have me out.. here is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
     <div id="banner-images"> </div>
<script> 
var images = ['1.jpg ', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
 
$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-images');
</script>
</body>
</html>

Solution

I hope i understood your question correctly. Here is a solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
    <div id="banner-images"> </div>
    <script> 
        var images = [
            {src: '1.jpg', href: '#link1'},
            {src: '2.jpg', href: '#link2'},
            {src: '3.jpg', href: '#link3'},
            {src: '4.jpg', href: '#link4'}
        ];
        var random_image = images[Math.floor(Math.random() * images.length)];
        $('<a href="' + random_image.href + '"><img class="fade-in" src="images/' + random_image.src + '"></a>').appendTo('#banner-images');
    </script>
</body>
</html>

If you want to make it clearer, you can do it this way with JavaScript Template Literals.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
    <div id="banner-images"></div>
    <script> 
        var images = [
            {src: '1.jpg', href: '#link1'},
            {src: '2.jpg', href: '#link2'},
            {src: '3.jpg', href: '#link3'},
            {src: '4.jpg', href: '#link4'}
        ];

        var random_image = images[Math.floor(Math.random() * images.length)];

        $('#banner-images').html(`
            <a href="${random_image.href}">
                <img class="fade-in" src="images/${random_image.src}">
            </a>
        `);
    </script>
</body>
</html>