我不能让我的图像图库使用JavaScript

Question

我正在构建一个在大学网站上使用的导航，如下所示：

我似乎无法使用javascript来处理我的HTML。当我保存所有文档然后在浏览器中启动它时，控制按钮不会更改图像，并且图像在4000ms后不会旋转。我正在寻找一双新鲜的眼睛能帮助我。

我已经尝试了几个小时，似乎无法找到它为什么不起作用。

所以这是 HTML：          

<div id="frontimages">
 <div id="nav1">
    <img src="navimages/frontimage1.png" alt="" style="position: absolute; top: 0%; left: 0%;">
 </div>
 <div id="nav2">
    <img src="navimages/frontimage2.png" alt="" style="position: absolute; top: 0%; left: 0%;">
 </div>
 <div id="nav3">
    <img src="navimages/frontimage1.png" alt="" style="position: absolute; top: 0%; left: 0%;">
 </div>
 <div id="nav4">
    <img src="navimages/frontimage2.png" alt="" style="position: absolute; top: 0%; left: 0%;">
 </div>

</div>
<div id="frontcontrols">
 <ul>
     <li>
         <a id="nav1" href="#">
            <img src="navimages/frontdot_here.png" alt="navdot">
         </a>
     </li>
     <li>
         <a id="nav2" href="#">
             <img src="navimages/frontdot.png" alt="navdot">
         </a>
     </li>
     <li>
         <a id="nav3" href="#">
             <img src="navimages/frontdot.png" alt="navdot">
         </a>
     </li>
     <li>
         <a id="nav4" href="#">
              <img src="navimages/frontdot.png" alt="navdot">
         </a>
     </li>
</ul>
</div>

这是 css

    #frontimages{
    position: relative;
    left: 119px;
    top: 138px;
    width: 1050px;
    z-index:2;
}

    #frontcontrols{
    position: absolute;
    left: 1040px;
    top: 490px;
    z-index:21;
    display: inline;
    width: 120px;
    height: 17px;
    }

这是 JS：

    $(document).ready(function () {
    var currPos = 0,
        slides  = [],
        speed   = 10000;

    $('#frontimages > div > img').css({
        'position': 'absolute',
        'top': '0%',
        'left': '0%'
    });

    var i = 0;
    $('#frontimages > div').each(function () {
        slides[i] = $(this);

        if (i > 0) {
            $(this).remove();
        }

        i++;
    });


    var slideCnt = slides.length;
    var interval = setInterval(changePosition, speed);

    $('#frontcontrols li a').click(function (ev) {
        ev.preventDefault();
        clearInterval(interval);

        var idx = $(this).parent().index();

        if (idx != currPos) {
            currPos = idx;
            slide();
        }

        interval = setInterval(changePosition, speed);
    });

    function changePosition() {
        if (currPos == slideCnt - 1) {
            currPos = 0;
        } else {
            currPos++;
        }

        slide();
    }

    function slide() {
        $('#frontcontrols li a img').attr('src', 'navimages/frontdot.png');
        $('#frontcontrols li:eq(' + currPos + ') a img').attr('src', 'navimages/frontdot_here.png');

        $('#frontimages').prepend(slides[currPos]);

        $('#frontimages > div:eq(1)').fadeOut(400, function () {
            $('#frontimages > div:eq(1)').css('display', 'block').remove();
        });
    }
});