javascript - 为什么 jQuery 图像 slider 不起作用？

Question

我刚刚看了一个关于构建 Jquery 图片库的 youtube 教程 (https://www.youtube.com/watch?v=KkzVFB3Ba_o)(因为我对 Jquery 知之甚少)，但是它似乎无论如何都不起作用。我彻底检查了我的代码，并修复了所有可能的错误，但它仍然无法正常工作。我做错了什么？？

HTML:

<div id="slider">
  <ul class="slides">
    <li class="slide"><img src="images/1.jpg"></li>
    <li class="slide"><img src="images/2.jpg"></li>
    <li class="slide"><img src="images/3.jpg"></li>
    <li class="slide"><img src="images/4.jpg"></li>
    <li class="slide"><img src="images/5.jpg"></li>
    <li class="slide"><img src="images/6.jpg"></li>
  </ul>
</div>

CSS:

#slider
{
    width: 720px;
    height: 400px;
    overflow: hidden;
}

#slider.slides
{
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
}

#slider.slide
{
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px;
}

Jquery/Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    $(function() {

    var $slider=$('#slider');
    var $slideContainer=$slider.find('.slides')
    var $slides=$slideContainer.find('.slide');
    var width=720;
    var animationSpeed=1000;
    var pause = 3000;
    var CurrentSlide=1;
    var interval;

     function startSlider()
     {


        interval= setInterval(function(){
            $slider.animate({'margin-left': '-='+width},animationSpeed,function()
                CurrentSlide++;
                if (CurrentSlide===$slides.length){
                    CurrentSlide=1;
                    $slideContainer.css('margin-left',0); 
                }
                });
        },pause);
    }

    function pauseSlider()
    {
        clearInterval(interval);
    }

       $slider.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
       startSlider();

    });



</script>

我元素的源文件夹:https://drive.google.com/open?id=1M3kvUAWlCRqiZIWLLmTH_60qo0gsxzgT

Answer 1

你不见了

<ul class="slides">