5

以下是我用来创建滑块的脚本部分，方法是在一段时间内更改我拥有的每个图像对象的背景图像。

   #Sliderimg - height is 500px,

   $("#Sliderimg").css({
        "background-image": "url(../Images/" +SliderImageObj.image + ")",
        "display": "block",
        "z-index": "50px"
    });

这可能出了什么问题，因为每次更改图像时都会出现闪烁效果，我的问题不在于即将加载的新图像，旧图像的闪烁（闪烁到屏幕底部）即将被替换。

4

4 回答 4

1

您会看到闪烁，因为每次更改背景图像时，您的浏览器都必须先下载它才能显示背景。如果图像不是太大（超过 5kb），您可以尝试在浏览器中缓存它们，方法是将它们应用于它们不会显示的元素。

此外，50px 不是有效的 z-index，该属性只需要整数。

于 2012-06-13T17:29:56.183 回答
0

也许从您的 z-index 属性中删除“px”？它采用十进制值。

于 2012-06-13T17:29:34.770 回答
0

浏览器被迫重绘整个背景。

这是通过将背景设置为白色然后重绘新背景来完成的。

使用 jquery.animate() 来解决这个问题。

于 2012-06-13T17:32:04.923 回答
0

前几天我也有同样的问题。奇怪的是，它在 FF 中似乎还可以，但在 IE、Chrome 和有时 Safari 中会闪烁。解决方案是使用 css sprite sheet。您创建了两个背景彼此相邻的图像。您只显示背景表的一部分。您可以通过调整背景上的边距来切换它。您可以使用 addClass 和 removeClass 处理边距调整。下面是代码，请参见此处获取小提琴：http: //jsfiddle.net/fMhMY/

CSS

.navButton span{
width:32px;
height:32px;
display:block;
}

a.leftButton span, a#leftButton span{
background-image:url(Prev.png);
background-position:-64px 0px;
}

/*nav button sprites */

/*sprite order is pushed, hover, natural */

a.leftButton.navOver span, a.rightButton.navOver span{
background-position:-32px 0px;
}

a.leftButton.navPressed span, a.rightButton.navPressed span{
background-position:0px 0px;
}

HTML

<div style='display:inline-block'>
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'>
        <span></span>
    </a>
</div>

jQuery

$('.leftButton').mousedown(function() {

        $('.leftButton').addClass('navPressed');
        console.log('mousedown');

});
$('.leftButton').mouseup(function() {
        $('.leftButton').removeClass('navPressed');
        console.log('mouseup');
});

$('.leftButton').hover(function() {
        $('.leftButton').addClass('navOver');
        console.log('hover');
});


$('.leftButton').mouseout(function() {
        $('.leftButton').removeClass('navPressed').removeClass('navOver');
        console.log('mouseout');
});
于 2013-12-20T23:29:53.960 回答