0

我有 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>

最终发生的情况是，由于位置的原因，没有一个横幅出现：在循环期间，每个横幅都设置了绝对值。我在这里想念什么？这不应该工作吗？有一个更好的方法吗？

4

5 回答 5

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

这完美地工作。

于 2010-11-10T10:23:08.010 回答
0

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

于 2010-07-09T23:14:05.897 回答
0

你确定你应该设置绝对位置吗？如果您查看此演示 ( http://jquery.malsup.com/cycle/basic.html )，位置都相同，但 z-indexes/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>
于 2010-07-09T23:15:01.240 回答
0

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

于 2010-07-09T23:16:28.020 回答
-1

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

于 2010-07-13T15:03:27.650 回答