图库在第二次使用后停止工作

所以我在网站im建筑中遇到了一个奇怪的问题。在"关于"页面中，有一个小画廊显示一些图片。第一次进入页面时，一切都按预期工作。现在，假设我退出"关于"页面并转到网站中的任何其他页面，再次进入"关于"页面的那一刻，它将停止工作。刷新页面后它将再次工作，并且问题再次继续存在。

这是画廊的构建方式：

.HTML：

<div class='about_slide_show' id="about_slide_show">
    <div class="gc_next_arrow">
        <div class="arrow_block">
            <img src="./images/arrow_right.png" alt="" id="au_next" onclick="pic_next(3)">
        </div>          
    </div>
    <div class="gc_prev_arrow">
        <div class="arrow_block">
            <img src="./images/arrow_left.png" alt="" id="au_prev" onclick="pic_prev(1)">
        </div>              
    </div>
</div>

.CSS：

.about_slide_show{
    width: 50%;
    min-width: 650px;
    height: 50%;
    margin: 20px auto 20px auto;
    background-color: #fafafa;
    box-shadow: 0px 5px 10px #cacaca;
    background-image: url('./images/about/2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.gc_next_arrow{
    position: absolute;
    top: 45%;
    right: 0;
}
.gc_prev_arrow{
    position: absolute;
    top: 45%;
    left: 0;
}
.arrow_block{
    color: #000;
    width: 50px;
    height: 50px;
    margin: 0 10px 0 10px;
    background-color: #000;
    border-radius: 120px;
    opacity: 0.8;
}

JavaScript：

<script>
var ext_numbers,
    pic_files,
    max_value;
    $(document).ready(function(){       
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                if(xmlhttp.responseText){
                    xml_data = xmlhttp.responseText;
                    xml_data1 = xml_data.split("/");
                    ext_numbers = xml_data1['1'].split("+");
                    pic_files = xml_data1['0'].split("+");
                    max_value = Number(pic_files['0']);
                    document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files['2']+"')";
                }
                else{
                }
            }                                               
            else{
            }
        };
        xmlhttp.open("POST",'check_about.php',false);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send();
    });
    function pic_next(nid){
        if(Number(nid) <= max_value){
            $("#about_slide_show").fadeOut(50,function(){
                document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files[Number(nid)]+"')";
                $("#about_slide_show").fadeIn(250,function(){
                    document.getElementById("au_prev").onclick = function(){pic_prev(ext_numbers[Number(nid) - 1]);};
                    document.getElementById("au_next").onclick = function(){pic_next(ext_numbers[Number(nid) + 1]);};
                });
            });
        }
    }
    function pic_prev(pid){
        if(pid > 1){
            $("#about_slide_show").fadeOut(50,function(){
                document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files[Number(pid)]+"')";
                $("#about_slide_show").fadeIn(250,function(){
                    document.getElementById("au_prev").onclick = function(){pic_prev(ext_numbers[Number(pid) - 1]);};
                    document.getElementById("au_next").onclick = function(){pic_next(ext_numbers[Number(pid) + 1]);};
                });
            });
        }
        else if(pid == 1){
            $("#about_slide_show").fadeOut(50,function(){
                document.getElementById("about_slide_show").style.backgroundImage = "url('./images/about/"+pic_files[Number(pid)]+"')";
                $("#about_slide_show").fadeIn(250,function(){
                    document.getElementById("au_prev").onclick = function(){};
                    document.getElementById("au_next").onclick = function(){pic_next(ext_numbers[Number(pid) + 1]);};
                });
            });
        }
    }
</script>

.PHP：

<?php
    $folder_path = "./images/about/";
    $files = preg_grep('/^([^.])/', scandir($folder_path));
    $sort_flags = 1;
    sort($files,$sort_flags);   
    echo count($files);
    foreach ($files as $key => $value) {
        echo '+'.$value;
    }
    echo '/null';
    foreach ($files as $key => $value) {
        $temp_files = explode(".", $value);
        echo "+".$temp_files['0'];      
    }
?>

$(document).ready函数内的 AJAX 调用只是获取一个字符串，其中包含 about 文件夹中的图片数量、图片文件名及其名称（不带扩展名）。AJAX 调用返回的字符串如下所示：

2+1.jpg+2.jpg/空+1+2

然后我只是打破字符串并将其插入数组中。

之后的JavaScript仅用于浏览图库（下一张图片和上一张图片）。

谁能知道为什么我有这个问题？如有必要，我会提供任何额外的信息。

谢谢。