Question

我使用此代码的目标是创建自定义＆＃34;幻灯片＆＃34;用滚动上面图片的按钮。

在处理相同问题并搜索API文档和stackoverflow大约两周后，我想我已经完成了我自己在这里发布的所有内容。即使改变了我的方法，我也有两个问题，老师可以帮助我。

- 坐在屏幕外的两张照片拉伸了他们所在的div，看起来......丑陋。即使我让动画工作，它们也需要在同一个X轴上才能看起来很平滑。它也需要更小才能看到按钮。

- 动画同时或者在另一个之后播放，甚至在动画完成之前进行非动画相关的代码甚至回调。

在动画上，我觉得我尝试做的事情最好在一个例子中解释。我按#right-button，使#centerSlide快速离开屏幕右侧。然后，#rightSlide滚动到屏幕的中心，其src是正确的，slideArray。 #centerSlide出现时没有动画，因为屏幕中央的正确图片（#rightSlide顶部），#rightSlide出现在屏幕右侧。

此外，如果你们有任何关于如何使我的代码更优雅，或者有关于奇怪的格式/样式约定的建议，请告诉我，以便我可以解决它。

这是我的代码：

<!DOCTYPE = html>

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

jQuery动画排队问题+ bootstrap div问题

0 个答案: