Question

这里的第一个块是每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＆amp; 3是重叠的，只有一个div是可见的。我想在遇到问题之前你必须尝试几次代码。

Answer 1

$(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重叠。这不是我提出的。我得到了别人的帮助。但我仍然希望与可能遇到类似问题的人分享答案。

在jquery中重叠幻灯片，div重叠

1 个答案: