Question

我有以下代码，单击图像时会在div之间滑动。

问题是，我希望能够像这样滑动：red＆gt;绿色＆gt;蓝色，但此刻我只能在红色和绿色div之间滑动。

有人能在这里给我一些指导吗？

谢谢！

/* These are the individual divs which are scrolled through */
#left {
    min-width:100%;
    min-height:300px;
    background:red;
    position:absolute;
    top: 0;
    left:0;
}
#right {
    min-width:100%;
    min-height:300px;
    background:blue;
    position:absolute;
    top: 0; 
    right:-105%;
}
#middle {
    min-width:100%;
    min-height:300px;
    background:green;
    position:absolute;
    top: 0;
    right:-205%;
}

JS / JQuery的：

<script>
    $(document).ready(function() {

    //Scroll all content to the left <---- this way
    $('#scrollRight').click(function(e) {  

            $('.container').animate({'left': '-105%'});             

        });

        //Scroll all content to the right ----> this way
    $('#scrollLeft').click(function(e) {  
    $('.container').animate({'left': '0%'});        

        });         

    //End document ready function.      
    });
    </script>

HTML：

<div class="container"> 
            <!-- You have to add the last div first, so that each div will get added after that...basically so that the div you wich to see first, is in first position -->

            <div id="right">right scroll</div>  
            <div id="middle">left scroll</div>          
            <div id="left">left scroll</div>

    </div>

这是小提琴：

http://jsfiddle.net/45g3Le59/

Answer 1

所有三个DIVS同时进行动画制作，因此您只能看到两个动画幻灯片...在动画之间添加延迟。

.animate（{'left'：'0％'}）;附加到3个div时不工作？

1 个答案: