Question

考虑我有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之后淡出并显示第三张图像
第3张图片在300ms之后淡出并显示第1张图片....

第二次编辑：

我使用了昵称，但没有发生任何事情......

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

Answer 1

这是一种快速的方法：

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

Answer 2

您可以使用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()事件因任何原因而被延迟。

Answer 3

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

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

也许更优雅一点。

在div中Jquery图像模糊效果？

3 个答案: