javascript to switch pictures by clicking a button

<div id="div">
        <p id="desc"></p>
        <!--Display the first picture by default-->
        <img src="img/1.jpg" alt="Load failed" style="width: 800px;height: 400px;">
        <button id="pre">Previous</button>
        <button id="next">Next</button>
</div>

<style>
        * {
            margin: 0;
            padding: 0;
        }
    
        #div {
            width: 800px;
            height: 420px;
            margin: 20px auto;
            background-color: rgb(243, 119, 36);
            text-align: center;
        }
    
        button:hover {
            cursor: pointer;
        }
</style>

<script>
        //Preload, execute the script after the page is loaded window.onload = function () {
         
            var num = document.getElementsByTagName("img")[0];
            //Although there is only one img tag here, the result of the num variable is still an array //Define the image address var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"];

            //Get the button var prev = document.getElementById("pre");
            var next = document.getElementById("next");
            var index = 0;
            
            //Picture description var p_desc = document.getElementById("desc");
            p_desc.innerHTML = "Total" + shuzu.length + "pictures" + ", current is " + (index + 1) + "picture";
            //Note that the string in front is concatenated, and brackets are needed to implement addition //Click to switch pictures prev.onclick = function () {
                index--;
                //Here let it loop if (index < 0)
                    index = shuzu.length - 1;
                num.src = shuzu[index];
                p_desc.innerHTML = "a total of" + shuzu.length + "pictures" + ", the current one is " + (index + 1) + ""; //Note that the string in front is concatenated, and brackets are needed to implement addition}

            next.onclick = function () {
                index++;
                if (index > shuzu.length - 1)
                    index = 0;
                num.src = shuzu[index];
                p_desc.innerHTML = "a total of" + shuzu.length + "pictures" + ", the current one is " + (index + 1) + ""; //Note that the string in front is concatenated, and brackets are needed to implement addition}
}