在div中的jquery图像模糊效果？

考虑我有three images和one bannerDiv ....在初始页面加载我应该显示第1图像和sometimeout后说300ms我必须显示第二图像，反之亦然.... 我必须blur第一形象和表演第二图像....任何建议如何能与jQuery做...在div中的jquery图像模糊效果？

和我的jQuery的功能，

<script type="text/javascript"> 

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

编辑：

1图像300ms后淡出，并显示第二图像
第二图象300ms后淡出，并显示图像3
3图像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;}

来源

2010-04-05 bala3569

你是什么意思的“模糊”？ – 2010-04-05 11:14:18

@尼克淡入淡出效果 – bala3569 2010-04-05 11:17:15

为什么你将图片注释掉了？ ''％ - ' 这个CSS也是'#BannerDiv img'，不是div（就像在我的回答中）供你使用:) – 2010-04-05 12:26:56

这里有一个快速的方法来做到这一点：

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

Here's an example using colored divs, it would be the exact same when replaced with images like you want。

来源

2010-04-05 11:58:22

@Nick看看我的第二个编辑...没有错误，但仍然是空的页面... – bala3569 2010-04-05 12:25:29

@Nick仍然有三个图像显示在初始页面加载... – bala3569 2010-04-05 12:54:55

@ bala3569 - 使用'#BannerDiv img' CSS应该不会发生，你有链接到你的网页？ – 2010-04-05 12:56:50

可以使用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-05 11:22:13 cletus

@cletus看到我的编辑..我应该让我的div在做之前可见.. – bala3569 2010-04-05 11:23:00

@cletus'cycle_images'参数为'setInterval'函数带来了什么... – bala3569 2010-04-05 11:24:41

@cletus我llet你知道我得到的效果。 ... – bala3569 2010-04-05 11:26:27

(function($){ 
$.fn.showdelay = function(){ 
    var delay = 0; 
    return this.each(function(){ 
     $(this).delay(delay).fadeIn(100); 
     delay += 300; 
    }); 
}; 
})(jQuery);

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

也许有点更优雅。

来源

2010-04-05 11:30:00 jAndy

它只循环所有的元素一次。 – CodeJoust 2010-04-05 11:35:16

在div中的jquery图像模糊效果？

回答

相关问题