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

Answer 2

你在功能

之后缺少大括号

  $slider.animate({'margin-left': '-='+width},animationSpeed,function()

应该是

  $slider.animate({'margin-left': '-='+width},animationSpeed,function(){

为什么jQuery Image Slider不起作用？

2 个答案: