Question

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

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

我意识到滚动条正在显示，因为我将css“left”设置在屏幕右侧，但不知道任何其他方式允许从右侧滑入

<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);
});

Answer 1

CSS：

body{ overflow:hidden}

或（CSS 3）

body{ overflow-y:hidden;}

或（CSS 3）

body{ overflow-x:hidden;}

或使用jquery在动画制作时设置上述css

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

*我的语法可能有误，因为我是从头脑中写这个

jQuery英雄背景从右到左滑动

1 个答案: