0

我正在寻找一个可以帮助我解决以下问题的 jQuery 插件：

我有一个我想用于我的标题的图像列表，但它们非常大（尤其是高度），我不想调整它们以适应我的小标题 div。

我想要的是一个 插件，它允许图像从 div 的底部（或者更确切地说是 div 顶部的图像顶部）开始并向上移动，以便可以看到整个图像，一旦它们向上移动完全显示（div 底部的图像底部）它们应该与下一个图像“混合”（不透明度切换或类似的东西），从而与所有图像创建一个连续循环。

我浏览了几个插件，但从未找到一个可以实现我正在寻找的东西（也许我要求太多了），但我的 JS 不足以自己构建它。

谢谢！

编辑：我决定根据alexteg的帖子走向另一个方向，即：

            $('#header_img img').hide();
            $('#header_img img').each(function(i) {
                $(this).show().animate({
                    opacity: 1.0,
                    marginTop: '-=' + ($(this).height() - $('#header_img').height())
                }, 5000, function() {
                    $(this).animate({
                        opacity: 0.0
                    }, 1000).hide();
                });
            });

现在我遇到的唯一问题是第一个图像触发，一旦完成它就会触发第二个，但它也会立即触发下一个，而不是等到整个动画完成。

现在我知道我可以用动画回调来做到这一点，但我不知道如何将它与我正在做的每一个结合起来，以循环我的图像。理想情况下，它还会继续循环（在最后一个图像之后再次播放第一个图像，依此类推），所以如果有人有任何想法，非常感谢！

4

2 回答 2

2

Cycle 插件可以很好地进行混合。如果您希望为第一个图像设置动画，您可以使用.animate() -函数和激活循环插件的回调。您可能需要隐藏除第一个动画之外的所有图像，然后显示它们并激活循环插件。

对于循环插件，您需要像这样放置图像：

<div id="header"> 
    <img src="images/header_1.jpg" width="900" height="250" /> 
    <img src="images/header_2.jpg" width="900" height="250" /> 
    <img src="images/header_3.jpg" width="900" height="250" /> 
</div>

然后，您可以执行以下操作：

$(document).ready(function(){
  $('#header img').hide();
  $('#header').animate({
    opacity: 1.0,
    marginTop: '-=250',
  }, 5000, function() {
    $('#header').cycle({
      fx:   'fade',
      speed:    3000,
      timeout:  7000
    });
  });
});

然后，您还需要初始 CSS，例如：

#header {
    height: 250px;
    overflow: hidden;
}

#header img:first-child {
    margin-top: 250px;
}

当然，您需要根据需要调整所有名称、大小速度等。

于 2010-05-13T16:22:56.950 回答
0

我喜欢循环，但我认为这个对于标题来说可能更优雅：

来自 Dev7 的 Nivo 滑块 http://nivo.dev7studios.com/

但是使用来自alexteg的CSS ，你也可以查看剪辑

http://www.w3schools.com/CSS/pr_pos_clip.asp

于 2010-05-13T16:33:30.550 回答