jQuery动画排队问题+；引导分区问题

我使用这段代码的目标是创建一个自定义的“幻灯片”，其中包含滚动上面图片的按钮

在处理了大约两周的同一个问题，整理了API文档和stackoverflow之后，我想我已经做了所有我能做的事情，除了自己在这里发布之外。我一直有两个问题，我的老师不能帮助我，即使在改变我的方法之后

-屏幕外的两张照片延伸了他们所在的部门，看起来。。。丑陋的。即使我让动画工作，他们需要在同一个X轴上看起来平滑。它需要小得多才能看到按钮

-动画同时播放或紧接着播放，甚至在动画完成之前执行与动画无关的代码甚至回调

关于动画，我觉得我要做的最好用一个例子来解释。 我按下

#right按钮

，这会使

#centerSlide

快速从屏幕右侧消失。然后，

#right slide

滚动到屏幕中央，其

src

是正确的，从

slideArray

中绘制

#centerSlide

在屏幕中央（位于

#rightSlide

顶部）显示正确的图片，而

#rightSlide

在屏幕右侧显示

另外，如果你们中有人对如何使我的代码更优雅有任何建议，或者对奇怪的格式/样式约定有任何顾虑，请告诉我，以便我可以修复它

这是我的密码：

<!DOCTYPE = html>

商业网站
斯莱德姆先生{
宽度：60%；
位置：相对位置；
溢出：隐藏；
}
.缩略图{
宽度：10%；
}
.bg1{
背景色：#2B4251；
溢出：隐藏；
}
.bg2{
背景色：#91B3BC；
}
.bg3{
背景色：5B7D87；
}
.bg4{
背景色：#45415E；
}
//幻灯片数组初始化
var slideArray=[]；
//幻灯片对象构造函数
功能幻灯片（slideNum、imgSrc）{
this.slideNum=slideNum；
this.imgSrc=imgSrc；
}
var slide0=新幻灯片（0，“competitive-stick-fig.png”）；
var slide1=新幻灯片（1，“working hands.jpg”）；
var slide2=新幻灯片（2，“在办公室工作的人.jpg”）；
slideArray.push（slide0，slide1，slide2）；//将幻灯片添加到阵列
var计数器=0；
var counterMax=slideArray.length-1//数学
//结束幻灯片数组初始化
//jquery
$（文档）.ready（函数（）{
$（“#左键”）。单击（函数（）{
changeCounterNum（“左”）；
})
$（“#右键”）。单击（函数（）{
changeCounterNum（“右”）；
})
函数changeCounterNum（string）{//这只是设置计数器以选择正确的centerSlide。centerSlide的实际更改将发生在动画子例程中
如果（字符串==“右”）{
如果（计数器==计数器最大值）{
计数器=0；
动画滑动（字符串、计数器）；
}
否则{
计数器++；
动画滑动（字符串、计数器）；
}
}
else if（字符串==“左”）{
如果（计数器==0）{
计数器=计数器最大值；
动画滑动（字符串、计数器）；
}
否则{
计数器--；
动画滑动（字符串、计数器）；
}
}    
}  
函数animateSlide（字符串，num）{
如果（字符串==“左”）{
$（“#中心幻灯片”）。设置动画（{左：“-100%”），“快速”，“摆动”，“$（#左幻灯片”）。设置动画（{左：0}，“快速”）；
$（“#中心幻灯片”）.attr（“src”，slideArray[counter].imgSrc）；
$（“#中心幻灯片”）.css（“左”，0）；
$（“#leftSlide”）.css（“左”，“100%”）；
}
else if（字符串==“右”）{
$（“#中心幻灯片”）。动画（{left:100%，}，“fast”，“swing”，“$（#leftSlide”）。动画（{left:0}，“fast”）；
$（“#中心幻灯片”）.attr（“src”，slideArray[counter].imgSrc）；
$（“#中心幻灯片”）.css（“左”，0）；
$（“#leftSlide”）.css（“左”，“100%”）；
}
}
});
企业名称
竞争的。合作的。计算机化

    <title>Business Website</title>

    <!--bootstrap stuff-->
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href = "https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--end bootstrap stuff-->

    <style>

        .slideImg{
            width: 60%;
            position: relative;
            overflow: hidden;
        }

        .thumbnail{
            width: 10%;
        }

        .bg1{
            background-color: #2B4251;
            overflow: hidden;
        }

        .bg2{
            background-color: #91B3BC;
        }

        .bg3{
            background-color: #5B7D87;
        }

        .bg4{
            background-color: #45415E;
        }

    </style>
    <!-- JQuery Lib Grab -->
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- JQuery -->   
    <script>

        //Slide Array init
        var slideArray = [];

        //slide object constructor
        function slide(slideNum, imgSrc){
            this.slideNum = slideNum;
            this.imgSrc = imgSrc;
        }

        var slide0 = new slide(0, "competitive-stick-fig.png");
        var slide1 = new slide(1, "working-hands.jpg");
        var slide2 = new slide(2, "people-working-in-the-office.jpg");

        slideArray.push(slide0, slide1, slide2);// add slides to array

        var counter = 0;
        var counterMax= slideArray.length - 1; //math
        // End Slide Array Init

        // jquery
        $(document).ready(  function() {  


            $("#left-button").click(function(){
                changeCounterNum("left");
            })

            $("#right-button").click(function(){
                changeCounterNum("right");
            })



            function changeCounterNum(string){//this is simply to set up the counter to select the correct centerSlide. The actual changing of the centerSlide will occur in the animation subroutine

                if(string == "right"){
                    if(counter == counterMax){
                        counter = 0;
                        animateSlide(string, counter);

                    }
                    else{
                        counter ++;
                        animateSlide(string, counter);
                    }
                }

                else if(string == "left"){

                    if(counter == 0){
                        counter = counterMax; 
                        animateSlide(string, counter);
                        }

                    else{
                        counter --;
                        animateSlide(string, counter);
                        }
                }    
            }  


        function animateSlide(string, num){
            if(string == "left"){ 
                $("#centerSlide").animate({left: "-100%"}, "fast", "swing", $("#leftSlide").animate({left: 0}, "fast") );
                $("#centerSlide").attr("src", slideArray[counter].imgSrc);
                $("#centerSlide").css("left", 0);
                $("#leftSlide").css("left", "100%");
            }

            else if(string == "right"){
                $("#centerSlide").animate({left: "100%"}, "fast", "swing", $("#leftSlide").animate({left: 0}, "fast"));
                $("#centerSlide").attr("src", slideArray[counter].imgSrc);
                $("#centerSlide").css("left", 0);
                $("#leftSlide").css("left", "100%");
            }
        }


        });



    </script>

</head>

<body class = "bg1"> 

        <!--Current Slides -->
    <div class = "bg2 fluid-container text-center">
        <h1>Business Name</h1>
        <h4>Competitive. Cooperative. Computerized.</h4>
        <br>
    </div>

    <div class = "bg3 fluid-container text-center">

        <div class = "text-center">
            <img id = "leftSlide" class = "slideImg" style = "left: 100%" src = "people-working-in-the-office.jpg">
            <img id = "centerSlide" class = "slideImg" src = "competitive-stick-fig.png">
            <img id = "rightSlide" class = "slideImg" style = "left: -100%" src = "working-hands.jpg">
        </div>

    </div>

    <br>

    <div class = "bg4 fluid-container text-center">

        <button type="button" id = "left-button" class="btn btn-lg">
            <span class="glyphicon glyphicon-menu-left"></span>
        </button>

        <img id = "stick-thumb" width = "10%" src = "competitive-stick-fig.png">
        <img id = "hands-thumb" width = "10%" src = "working-hands.jpg" >
        <img id = "people-thumb" width = "10%" src = "people-working-in-the-office.jpg">

        <button type="button" id = "right-button" class="btn btn-lg">
            <span class="glyphicon glyphicon-menu-right"></span>
        </button>

    </div>
</body>