代碼與setInterval延遲循環

我試圖製作一個圖像推子，通過一些圖像循環（3這裏）。我讓這個函數循環和淡入正確的圖像，它的作品，淡出一個圖像，而在下一個淡入淡出，所以沒有空白空間。除了當它到達數組的末尾時，函數會將數組中的最後一個圖像淡出，然後再循環，然後再次淡入，創建第二個空白空間。

Javscript代碼與setInterval延遲循環

<script type="text/javascript"> 
     var img_arr = [ 
      '#img1', 
      '#img2', 
      '#img3' 
     ] 
     var i = 0; 
     arr_length = img_arr.length; 
     //fade function 
     function fade_gal() { 
      $(img_arr[i]) 
       .animate(
        {opacity: '1.0' }, 500 
       ); 
      $('.img').delay(3000).animate({opacity: 0.0}, 500); 
      i = i + 1; 
      if (i == arr_length) { 
       i = 0; 
      } 
     } 
     $(document).ready(function img_gallery() { 
      //initial function 
      fade_gal(); 
      //set function interval 
      setInterval(function() {fade_gal()}, 3500); 
     }) 
    </script>

HTML

<div id="scroller"> 
      <img src="../../images/1.jpg" alt="img1" width="300px" id="img1" class="img"/> 
      <img src="../../images/2.jpg" alt="img1" width="300px" id="img2" class="img"/> 
      <img src="../../images/3.jpg" alt="img1" width="300px" id="img3" class="img"/> 
     </div>

來源

2012-09-30 Hat

我平時儘量不要在回答中提供完整的代碼，但在這裏是不具有間隙的改變http://jsfiddle.net/FSLZP/ – dakdad

嘗試改變這一行：

$('.img').delay(3000).animate({opacity: 0.0}, 500);

這樣：

$(img_arr[i]).delay(3000).animate({opacity: 0.0}, 500);

我有一種感覺它的存在的淡出與衰落之間的衝突。

來源

2012-09-30 18:12:33 weexpectedTHIS

我不明白了一個道理，在每次運行褪色所有圖片...

如果您的圖片絕對定位沒有z-index有一個頂部和一個底部。

您只需將頂部圖像淡出，完成後將它發送到底部。

您可以像這樣（編輯）的代碼時（這裏是一個小提琴：http://jsfiddle.net/txLet/）：

//fade function 
function fade_gal() { 
    var container = $('#container'); 
    var imgs = $('img',container); 
    var img = imgs.last(); 
    img.animate({opacity: '0'}, {duration: 500, complete: function(){ 
     container.prepend(img); //send image to bottom 
     img.css({opacity: 1}); 
    }}); 
} 
$(document).ready(function img_gallery() { 
    //initial function 
    fade_gal(); 
    //set function interval 
    setInterval(fade_gal,2000); 
})

來源

2012-09-30 18:20:52

你的代碼是混亂給我，不，這是錯誤的。我無法弄清楚時間。

這是我的版本：（jsFiddle）

var img_arr = [ 
    '#img1', 
    '#img2', 
    '#img3' 
    ]; 



arr_length = img_arr.length; 
var i = arr_length; 
//fade function 

$('.img').css('opacity', 0.0); 

function fade_gal() { 

    $(img_arr[(i-1)%arr_length]).animate({opacity: 0.0}, 500); 
    $(img_arr[i%arr_length]).animate({opacity: 1.0}, 500); 

    i++; 
} 

$(document).ready(function() { 
    //initial function 
    fade_gal() 

    //set function interval 
    setInterval(function() { 
     fade_gal() 
    }, 3500); 
})

來源

2012-09-30 18:28:42 Lian

代碼與setInterval延遲循環

回答

相關問題