獲取jQuery圖像交叉淡入以停止懸停？

我創建了一個使用jQuery的圖像「循環」，我希望它在停止時停止，但不知道從哪裏開始。該循環切換圖像之間沒有淡入淡出，所以這不是問題。我對jQuery相當陌生，儘管我已經開始掌握這個概念，但我並不擅長。獲取jQuery圖像交叉淡入以停止懸停？

眼下劇本是這樣的：

<script type='text/javascript'> 
function cycleImages(){ 
     var $active = $('#cycler .active'); 
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first'); 
    $next.css('z-index',2); 
    $active.fadeOut(0,function(){ 
    $active.css('z-index',1).show().removeClass('active'); 
     $next.css('z-index',3).addClass('active'); 
    }); 
} 

$(document).ready(function(){ 
setInterval('cycleImages()', 120); 

}) 
</script>

我會很高興，如果有人可以解釋如何從這裏繼續！

來源

2013-12-20 j braun

var myTimer; 

function pauseLoop(){ 
    clearInterval(myTimer); 
} 

function startLoop(){ 
    myTimer = setInterval(cycleImages, 120); 
} 

$(document).ready(function(){ 
    startLoop(); 
    $("#cycler").hover(pauseLoop, startLoop) 
})

封裝函數中的setInterval（）以啓動和停止它，然後觸發啓動/暫停功能。

希望這可以讓你去。 :)

來源

2013-12-20 23:28:04 JasonDC

非常感謝你，作品像一個魅力！現在，當我看到這個實際的外觀時，我認爲如果循環直接在下一張圖片上直接重新開始，而不是等待最後一張圖片的剩餘時間，那麼效果會更好。你知道這是否真的很複雜，或者像我這樣的人能理解嗎？ –

var myTimer; 

function pauseLoop(){ 
    clearInterval(myTimer); 
} 

function startLoop(){ 
    cycleImages(); 
    myTimer = setInterval(cycleImages, 120); 
} 

$(document).ready(function(){ 
    myTimer = setInterval(cycleImages, 120); 
    $("#cycler").hover(pauseLoop, startLoop); 
})

代碼的一個小模塊應該這樣做。在「$（document）.ready」函數中，我們只是自動啓動啓動幻燈片顯示的計時器。然後重啓，我們運行你的「cycleImages（）」函數，然後重啓計時器。

來源

2013-12-20 23:55:58 JasonDC

獲取jQuery圖像交叉淡入以停止懸停？

回答

相關問題