遍歷圖像

Question

我知道這是周圍很多，但我不能得到它的工作：/

<div class='container'> 
     <img src="images/1.jpg" alt=""> 
     <img src="images/2.jpg" alt=""> 
    </div> 

所以我有2個圖像，這與下面的CSS被固定到全尺寸的瀏覽器窗口：

 <style type="text/css"> 
     .container { 
      position:fixed; 
      top:-50%; 
      left:-50%; 
      width:200%; 
      height:200%; 
     } 
     .container img { 
      position:absolute; 
      top:0; 
      left:0; 
      right:0; 
      bottom:0; 
      margin:auto; 
      min-width:50%; 
      min-height:50%; 
     } 
    </style> 

當前，它只顯示最後一幅圖像（2）以全尺寸顯示。但是，我想使用一些jQuery來顯示第一個，然後在X秒後，淡出數字1，並通過每個圖像中的漸變進行循環。我認爲最好是使用setInterval，然後fadeOut然後淡入圖像，但無論我做什麼都行不通。

我試圖走這行：

 <script type="text/javascript"> 
     $(document).ready(function() { 

      $('.container').children('img').each(function(i) { 
       $(this).fadeOut(); 
      }); 

     }); 
    </script> 

Answer 1

你可以試試這個。

$(document).ready(function() { 
    var _intervalId; 

    function fadeInLastImg() 
    { 
     var backImg = $('.container img:first'); 
     backImg.hide(); 
     $('.container').append(backImg); 
     backImg.fadeIn() 
    }; 

    _intervalId = setInterval(function() 
    { 
     fadeInLastImg(); 
    }, 1000); 

});​ 

這裏是的jsfiddle http://jsfiddle.net/KQ3wu/128/

Answer 2

試試這個代碼：

<script type="text/javascript"> 
     $(document).ready(function() { 
      var intervalId = setInterval(function() { 
       $('.container').find('img').each(function(i) { 
       $(this).fadeOut(); 
       }); 
      $(this).data('intervalId', intervalId); 
     }); 
    </script> 

Answer 3

jsBin demo

剛修改過的Fademe jQuery插件刪除鼠標懸停因爲你使用全屏圖像:)：

(function($){ 
    $.fn.fademe = function(F,P,S){ 
     F=F||700; 
     P=P||3000; 
     S=S-1||0;  
     var e=this.children(), T; 
     function a(){ e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0); } 
     e.eq(S).show().siblings(e).hide(); 
     function aa(){T=setTimeout(function(){a();aa();},F+P);}aa(); 
    }; 
})(jQuery); 



// USE PLUGIN: 
$(function(){  
    $('.container').fademe(); 
}); 

Answer 4

<script> 
function showImage1() 
{ 
    $('#IDimage1').show(); 
    setTimeout(showImage2,3000); 
} 

function showImage2() 
{ 
    $('#IDimage1').hide(); 
    $('#IDimage2').show(); 
} 
</script> 

以及這只是最簡單的方法，除此之外ü可以嘗試切換或淡入從JQuery的

/輸出功能

Answer 5

使用plugin jquery-timing這是一個單行：

$.repeat(1000).$('#container img:first').hide().appendTo('#container').fadeIn(); 

小提示：http://jsfiddle.net/creativecouple/zjUEs/