jQuery按時間間隔更新圖像

我正在嘗試將聖誕燈加入我的徽標。我打算在Flash中這樣做，但我試圖擺脫閃存，所以我決定嘗試使用jQuery。jQuery按時間間隔更新圖像

快速谷歌搜索返回this tutorial。哪一個做得很好，讓我走上正軌。問題是，我不希望圖像淡入和淡出，所以我代替

$active.fadeOut(function() $next.fadeIn().addClass('active');

與 $ active.show（函數（）$ next.show（）addClass（「激活」）。

這樣做的問題是，它只是旋轉，雖然圖像一次，然後停止。我試圖用hide代替，但它確實一個奇怪的縮小效果。

總之，我有4張圖片，我試圖循環使用此代碼：

function swapImages(){ 
    var $active = $('#myGallery .active'); 
    var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first'); 
    $active.show(function(){ 
    $active.removeClass('active'); 
    $next.show().addClass('active'); 
    }); 
} 
    $(document).ready(function(){ 
     setInterval('swapImages()', 1000); 
})

HTML：

<div id="myGallery"> 
     <img src="br_xmas_1.png" class="active" /> 
     <img src="br_xmas_2.png" /> 
     <img src="br_xmas_3.png" /> 
    <img src="br_xmas_4.png" /> 
</div>

See partly working full code here或不工作jsfiddle

來源

2011-12-03 BandonRandon

你試過show（）/ hide（）而不是fadeIn（）/ fadeOut（）嗎？ – macjohn

是的，這是我第一次嘗試。顯示很好，但隱藏使圖像縮小。它實際上看起來類正在被應用，它只是沒有正確隱藏圖像。 – BandonRandon

試試這個;

function swapImages() { 
    var $current = $('#myGallery img:visible'); 
    var $next = $current.next(); 
    if($next.length === 0) { 
     $next = $('#myGallery img:first'); 
    } 
    $current.hide(); 
    $next.show(); 
} 

$(document).ready(function() { 
    // Run our swapImages() function every 0.5 secs 
    setInterval(swapImages, 500); 
});

Working example

獎金（Random change）

function swapImages() { 
    var random = Math.floor(Math.random()*3), 
     $current = $('#myGallery img:visible'); 
    $current.hide(); 
    if($current.index() == random) { 
     random = ++random % 4; 
    } 
    $('#myGallery img').eq(random).show(); 
} 

$(document).ready(function() { 
    // Run our swapImages() function every 0.5 secs 
    setInterval(swapImages, 500); 
});

來源

2011-12-03 09:26:05

很酷，我通過改變'$ active.removeClass（'active'）;'到'$ active.hide（）。removeClass（'active'）;'但我認爲你的代碼更乾淨。只有一個問題。可以做任何關於跳動的事情嗎？ – BandonRandon

** jumpyness **是什麼意思？ –

我的意思是顯然FF是一個混蛋。 Chrome很高興。無視和感謝您的幫助！ – BandonRandon

啊，已經回答了。

試試這個one

您已經使用Show（）函數它增加了顯示：塊風格的元素。因此，一次運行後，所有圖像都立即顯示，最後一張顯示在其他圖像上方，以便顯示一幅圖像。

來源

2011-12-03 09:31:03

jQuery按時間間隔更新圖像

回答

相關問題