Question

我的Asp.Net MasterPage中有一个小jQuery函数，在3秒后淡出图像。它工作得很好，但我很难让它重新开始。我已经尝试了几件事，因为我使用jQuery是新的，我知道我有＆＃39;做或不做。我不能把手指放在上面。这就是我所拥有的：

 <script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script> 
 <script type="text/javascript">
    $(document).ready(function (){
        setTimeout(function (){
            $('#Image1').fadeOut('slow', function(){
                $('#Image1').remove();
            }); 
        }, 3000);

    });

    var fadeBack = function () {
        $('#Image1').fadeIn();
    };

    fadeBack();
</script>

就像我说的那样，它没有问题就消失了，但我找不到合适的代码结构来重新使用它。我想是否需要一个关于不透明度的If语句块？< / p>

真正的诀窍是我想要在我看到的3个盒子中的替代图像： Image Bar in Header

我总共有大约12张图片，只是希望它们将一张图片淡出来并带入另一张图片。更具体地说，我的意思是：

第（1）栏：Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn()等所以现在，我只需要帮助知道如何在第一列中执行此操作，并且我将查看是否可以将某些内容串在一起以使其他第2列和第3列跟进。每个时间为3秒。

最后，我是否可以使用数组存储其他图像，这些图像已经不在第一列框中并将其调用为幻灯片显示淡入淡出序列？我很感谢你帮助这些知识，所以我可以牢记这一点。感谢。

Answer 1

使用此代码，它将在3秒后隐藏图像，在1秒后，它将显示图像。

  $(document).ready(function (){
    setTimeout(function (){
        $('#Image1').fadeOut('slow'); 
    }, 3000);
    setTimeout(function (){
        $('#Image1').fadeIn('slow'); 
    }, 4000);
});

如果你想像幻灯片一样使用此代码

  <div class="yourimg_container">
     <img  src="http://localhost/app/img/off.png" id="Image1"/>
  </div>
  /* make an array containing your images path (you can fetch images from database   using asp.net/php query)*/

   var ss=  ["http://localhost/app/img/off.png",
           "http://localhost/app/img/on.png",
           "http://localhost/app/img/slider.png"];


  window.setInterval(function(){
      slideshow();
    }, 3000);

  function slideshow(){
    var im=$("#Image1").attr("src");

    for(i=0;i<ss.length;i++){

        if(ss[i]==im){
            if(i==ss.length-1) $('#Image1').attr("src",ss[0]);  
            else $('#Image1').attr("src",ss[i+1]);  
        }
    } 

  }

另外你可以使用像这样的其他效果

  function slideshow(){
    var im=$("#Image1").attr("src");

    for(i=0;i<ss.length;i++){

        if(ss[i]==im){
            if(i==ss.length-1) {

                $('#Image1').fadeOut(500);  
                $('#Image1').attr("src",ss[0]); 
                $('#Image1').fadeIn(700);   
            }
            else {
                $('#Image1').fadeOut(500);  
                $('#Image1').attr("src",ss[i+1]);   
                $('#Image1').fadeIn(700);   
            }
        }
      } 
    }

Answer 2

fadeBack()会立即启动，而fadeOut会延迟3秒。为fadeBack格栅设置一个超过3秒的计时器，将显示img。

Answer 3

有一个函数$('#Image1').remove();已应用。这意味着一旦淡出，html块将被删除。然后，您无法访问该对象。因为淡入和淡出访问相同的ID #Image1。所以评论这条线。它可能有用。

如何使用jQuery函数启动图像淡出和淡入

3 个答案: