0

是的，我知道有无数关于从右到左滑动图像（和 LTR）的帖子，但我还没有看到一个解决我的具体问题的帖子。

我有几个 div 用作我的背景。为了让它们从右向左滑动，我将 css 中的“左”设置为图像的宽度，然后将该图像设置为 0 的“左”（以及 css 左的前一个英雄图像为 0到 - 图像宽度）。问题是浏览器上的滚动条在动画发生时显示和消失。有没有办法在动画期间不显示滚动条。

我意识到滚动条正在显示，因为我将 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 回答