0

Yes, I know there are countless posts about sliding images right to left (and LTR), but I haven't seen one yet to solve my specific problem.

I've got several divs that I'm using as my backgrounds. In order to get them to slide right to left, I am setting the "left" in css to the width of the image and then animating that image in to a "left" of 0 (and the previous hero image from css left of 0 to -image width). The problem is that the scroll bar on the browser is showing up and disappearing whenever the animation takes place. Is there any way to not have the scrollbar show during the animation.

CSS「左」を画面の右側にオフに設定しているため、スクロールバーが表示されていることに気付きましたが、右からスライドインできるようにする他の方法がわかりません

<div id="hero_bg">
   <div class="hero"><img src="/img/one.jpg" /></div>
   <div class="hero"><img src="/img/two.jpg" /></div>
   <div class="hero"><img src="/img/three.jpg" /></div>
</div>

CSSは次のとおりです。

.hero
{
    position: absolute;
    display: none;
    width: 1245px;
    height: 619px;
    left: 0px;
    top: 0px;
    z-index: -1000;
}

そして最後にJS：

$(document).ready(function () {
    $('.hero').hide();

    var delay = 2000;
    var divIdx = -1;
    var arrDiv = $("div.hero").toArray();

    function bgSlide() {
        if (divIdx < 0) {
            divIdx = 0;
            $(arrDiv[divIdx]).show();
        } else {
            var $out = $(arrDiv[divIdx]);
            divIdx = (divIdx + 1) % arrDiv.length;
            var $in = $(arrDiv[divIdx]);
            $in.css('left', $in.outerWidth());
            $in.show();
            $out.animate({ left: -$out.outerWidth() });
            $in.animate({ left: 0 });
        }
    }

    setInterval(bgSlide, delay);
});
4

1 に答える 1

0

CSS:

body{ overflow:hidden}

または (CSS 3)

body{ overflow-y:hidden;}

または (CSS 3)

body{ overflow-x:hidden;}

またはjqueryを使用して、アニメーション時間中に上記のcssを設定します

$('body').css("overflow","hidden"}

※頭で書いているので構文が間違っているかもしれません

于 2012-05-25T03:39:59.643 に答える