1

这里的第一个块是每 5 秒后自动滑动 div

$(document).ready(function(){

                    var refreshId = setInterval( function() 
                    {    
                        $('.box').each(function() {
                            if ($(this).offset().left < 0) {
                                $(this).css("left", "150%");
                            } else if ($(this).offset().left > $('#container').width()) {
                                $(this).animate({
                                    left: '50%'
                                }, 500 );
                            } else {
                                $(this).animate({
                                    left: '-150%'
                                }, 500 );
                            }
                        });
                    },5000);

 //the second block is to move the div's to left on clicking the leftbutton               

         $(".leftbutton").click(function(){
                    $('.box').each(function() {
                        if ($(this).offset().left < 0) {
                            $(this).css("left", "150%");
                        } else if ($(this).offset().left > $('#container').width()) {
                            $(this).animate({
                                left: '50%'
                            }, 500 );
                        } else {
                            $(this).animate({
                                left: '-150%'
                            }, 500 );
                        }
                    });
                });
the third block is to move the div's to right side on click of right button



               $(".rightbutton").click(function(){
                    $('.box').each(function() {
                        if ($(this).offset().left < 0) {
                            $(this).animate({
                                left: '50%'
                            }, 500 );
                        } else if ($(this).offset().left > $('#container').width()) {
                            $(this).css({
                                'left': '-150%'
                            } );
                        } else {
                            $(this).animate({
                                left: '150%'
                            }, 500 );
                        }
                    });
                });
            });


//the below is the HTML

<div id="container">

        <div id="box1" class="box">Div #1</div>
        <div id="box2" class="box">Div #2</div>
        <div id="box3" class="box">Div #3</div>

    </div>

// the below is the CSS



 body {
        padding: 0px;    
    }

    #container {
        position: absolute;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;  
    }

    .box {
        position: absolute;
        width: 50%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 100px;
        margin-left: -25%;
    }

    #box1 {
        background-color: green;
        left: -150%;
    }

    #box2 {
        background-color: yellow;
    }

    #box3 {
        background-color: red;
        left: 150%;
    }

所以基本上经过几次试验和错误后，div 1,2 和 3 是重叠的，只有一个 div 是可见的。我想您将不得不在解决问题之前尝试几次代码。​</p>

4

1 回答 1

0 
$(document).ready(function(){
    var refreshId;
    var restartAnimation = function() {
        clearInterval(refreshId);
        refreshId = setInterval( function() 
        {    
            $('.box').each(function() {
                if ($(this).offset().left < 0) {
                    $(this).css("left", "150%");
                } else if ($(this).offset().left > $('#container').width()) {
                    $(this).animate({
                        left: '50%'
                    }, 500 );
                } else {
                    $(this).animate({
                        left: '-150%'
                    }, 500 );
                }
            });
        },1000);
    }

    restartAnimation()

    $(".leftbutton").click(function(){
        restartAnimation();
        $('.box').each(function() {
            if ($(this).offset().left < 0) {
                $(this).css("left", "150%");
            } else if ($(this).offset().left > $('#container').width()) {
                $(this).animate({
                    left: '50%'
                }, 500 );
            } else {
                $(this).animate({
                    left: '-150%'
                }, 500 );
            }
        });
    });
    $(".rightbutton").click(function(){
        restartAnimation();
        $('.box').each(function() {
            if ($(this).offset().left < 0) {
                $(this).animate({
                    left: '50%'
                }, 500 );
            } else if ($(this).offset().left > $('#container').width()) {
                $(this).css({
                    'left': '-150%'
                } );
            } else {
                $(this).animate({
                    left: '150%'
                }, 500 );
            }
        });
    });
});

// 上面的javascript完全解决了问题，现在通过调用重置自动动画的函数避免了手动和自动动画同时出现。这不会让 div 重叠。这不是我想出来的。我得到了别人的帮助。但我仍然想为可能遇到类似问题的人分享答案。

于 2012-11-10T21:01:04.280 回答