jQuery中的幻灯片重叠，div重叠 [英] Overlapping slides in jquery, divs get overlapped

问题描述

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

the first block here is for the automatic sliding of the divs after every 5 secs

$(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%;
    }

因此，在经过几次试验和错误后，divs 1,2& 3是重叠的，只有一个div是可见的.我猜您将不得不尝试几次代码才能解决问题.

so basically after a few trials and errors the divs 1,2 & 3 are overlapping and only one div is visible. I guess you will have to try the code a few times before getting to the problem. ​

推荐答案

$(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重叠.这不是我想到的.我得到别人的帮助.但我仍然想将答案分享给可能遇到类似问题的人.

// The above javascript solved the problem completely now the occurence of both manual and automatic animation at the same time has been avoided by calling a function that resets the automatic animation. This doesn't let the div's to get overlapped. This is not something that I came up with. I got help from someone else. but still I wanted to share the answer for someone who could encounter a similar issue.

这篇关于jQuery中的幻灯片重叠，div重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！