2

考虑到我有three images并且one bannerDiv....在初始页面加载时，我应该显示第一张图片，并且在一段时间后说300ms我必须显示第二张图片，反之亦然....我必须显示blur第一张图片并显示第二张图片....任何建议如何使用 jquery 完成...

<div Id="BannerDiv">
<img src="mylocation" alt="image1"/>
<img src="mylocation" alt="image2"/>
<img src="mylocation" alt="image3"/>
</div>

我的jQuery函数是，

<script type="text/javascript">

         $(document).ready(function() {
     //how to show first image and blur it to show second image after 300 ms
          });
</script>

编辑：

第一张图像淡出300ms并显示第二张图像后
第二张图像淡出300ms并显示第三张图像后
第三张图像淡出300ms并显示第一张图像....

第二次编辑：

我用了尼克的，但什么也没发生。。

<body>
    <form id="form1" runat="server">
    <div>
       <div Id="BannerDiv">
            <img src="Images/banner3.jpg" alt="image1" width="954" height="327"/>
            <img src="Images/ban_main_25.jpg" alt="image2" width="954" height="327"/>
            <img src="Images/banner_25.jpg" alt="image3" width="954" height="327"/>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#BannerDiv > :first').show();
            setTimeout(rotate, 1000);
        });

        function rotate() {
            var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
                setTimeout(rotate, 300);
            }).next().css({ 'z-index': 1 }).show();
            if (c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
        }
     </script>
    </form>
</body>

和CSS

 #BannerDiv {width: 954px; height: 327px;}
 #BannerDiv img {position: absolute; width: 954px; height: 327px; display: none;}​
4

3 回答 3

2

这是一个快速的方法：

$(function() {
    $('#BannerDiv > :first').show();
    setTimeout(rotate, 1000);
});

function rotate() {
  var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
    setTimeout(rotate, 3000);
  }).next().css({ 'z-index': 1 }).show();
  if(c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}
​

您需要以下 CSS 来匹配（根据您的调整尺寸）：

#BannerDiv {width: 400px; height: 200px;}
#BannerDiv img {position: absolute; width: 400px; height: 200px; display: none;}​

这是一个使用彩色 div 的示例，当替换为您想要的图像时，它会完全相同。

于 2010-04-05T11:58:22.730 回答
0

您可以setInterval()用于重复的定时操作：

$(function() {
  setInterval(300, cycle_images);
});

function cycle_images() {
  var banner = $("#BannerDiv");
  if (banner.is(":hidden")) {
    banner.children().hide().end().show();
  }
  var images = banner.children("img");
  var visible = images.filter(":visible");
  var index = images.index(visible);
  var next = (index + 1) % images.length;
  visible.fadeOut(100, function() {
    images[next].fadeIn(100);
  });
}

至于是否使用 CSS（外部或内联）隐藏横幅和/或图像，我个人的看法是，这样做通常会更好，因为如果你不这样做，如果ready()事件是，它会导致明显的闪烁因任何原因延迟。

于 2010-04-05T11:22:13.130 回答
0 
(function($){
$.fn.showdelay = function(){
    var delay = 0;
    return this.each(function(){
        $(this).delay(delay).fadeIn(100);
        delay += 300;
    });
};
})(jQuery);

用法：$("#BannerDiv").children().showdelay();

也许更优雅一点。

于 2010-04-05T11:30:00.540 回答