Question

我有4个横幅图像，我想在无限循环中使用基本淡入淡出动画循环浏览它们。我找到了这个jQuery插件：http://jquery.malsup.com/cycle/并试图这样做：

HTML：

<div id="banner">
    <div id="home-banner-1"></div>
    <div id="home-banner-2"></div>
    <div id="home-banner-3"></div>
    <div id="home-banner-4"></div>
</div>

CSS：

#banner {
    margin: 0 auto 20px;
    width: 940px;
}
#home-banner-1 {
    background: url(../Images/home_banner.png) no-repeat 0 0;
    height: 271px;
}
#home-banner-2 {
    background: url(../Images/home_banner.png) no-repeat 0 -272px;
    height: 271px;
}
#home-banner-3 {
    background: url(../Images/home_banner.png) no-repeat 0 -544px;
    height: 271px;
}
#home-banner-4 {
    background: url(../Images/home_banner.png) no-repeat 0 -816px;
    height: 271px;
}

JAVASCRIPT：

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#banner').cycle('fade');
    });
</script>

最终发生的事情是没有任何横幅由于位置而出现：在循环期间每个都设置了绝对值。我在这里错过了什么？这不应该工作吗？有更好的方法吗？

Answer 1

我相信你应该给每个横幅宽度。一旦你绝对定位它们，它们将变为0px宽，而不是填充父母。同时将横幅设置为相对位置。所以：

#banner { 
    position: relative;
    margin: 0 auto 20px; 
    width: 940px; 
} 
#home-banner-1 { 
    background: url(../Images/home_banner.png) no-repeat 0 0; 
    width: 940px;
    height: 271px; 
} 
#home-banner-2 { 
    background: url(../Images/home_banner.png) no-repeat 0 -272px; 
    width: 940px;
    height: 271px; 
} 
#home-banner-3 { 
    background: url(../Images/home_banner.png) no-repeat 0 -544px; 
    width: 940px;
    height: 271px; 
} 
#home-banner-4 { 
    background: url(../Images/home_banner.png) no-repeat 0 -816px; 
    width: 940px;
    height: 271px; 
}

这很有效。

Answer 2

如果对它们设置position: absolute，则会根据其父链中设置了position: relative的第一个元素定位它们。通常，这最终成为<body />元素。尝试在父position: relative上设置<div id="banner" />。

Answer 3

你确定你应该设置绝对位置吗？如果你看一下这个演示（http://jquery.malsup.com/cycle/basic.html），那么位置都是一样的，但是z-index / opacities / display属性不同。

<div class="slideshow" style="position: relative; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" style="position: absolute; z-index: 6; top: 0px; left: 0px; display: block; width: 200px; height: 200px; opacity: 1; ">
    </div>

Answer 4

我有类似的要求，最后使用了一个名为innerFade的插件。您可以通过以下网址查看：http://medienfreunde.com/lab/innerfade/

Answer 5

我无法使用迄今给出的任何答案来完成这项工作，所以我对问题的回答是删除精灵，而不是使用4个带有背景样式的div标签，使用4个独立的img标签拉4个独立图片。然后一切都开始按照宣传的方式发挥作用。

使用jQuery循环遍历1个精灵中包含的4个横幅图像

5 个答案: