我无法让我的图像库使用javascript_Javascript_Jquery_Html_Css_Image

我无法让我的图像库使用javascript

javascript jquery html css image

我无法让我的图像库使用javascript,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我正在构建一个用于大学网站的导航，如下所示： <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/frontimag

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

<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>

<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>

我似乎无法让javascript与我拥有的HTML一起工作。当我保存所有文档然后在浏览器中启动时，控制按钮不会更改图像，并且图像在4000ms后不会旋转。我想看看是否有一双新的眼睛可以帮助我

<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>

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

<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>

下面是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>

下面是JS:

<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>

    $(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();
        });
    }
});

“不工作”是指？请把这句话写成对不起，我应该说得更清楚。当我保存所有文档然后在浏览器中启动时，控制按钮不会更改图像，并且图像在4000ms后不会旋转。我想看看是否有一双新的眼睛可以帮助我看起来很好。有什么理由它内部不起作用吗？