jQuery淡入淡出在Google Chrome中無法正常工作

我遇到了使用jQuery製作的簡單幻燈片的問題。該腳本在Google Chrome瀏覽器以外的所有其他瀏覽器中都能正常工作。你可以找到活動網站here jQuery淡入淡出在Google Chrome中無法正常工作

有兩點不妥：

幻燈片自動啓動，但在第二張幻燈片後停止。
如果您單擊幻燈片指示器（....），有時會出現該幻燈片（通過CSS應用）的背景圖像，有時會保持隱藏狀態。

在最嚴重的是，我得到這個錯誤：

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

這裏是JavaScript我使用：

function nextSlide() { 
    var visibleSlide = $('#slider li:visible'); 
    var currentSlide = $(visibleSlide).index() + 1; 
    var slideCount = $('#slider li').size(); 
    var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1; 

    $('#slider_indicator a').removeClass('active'); 
    $(visibleSlide).fadeOut('fast', function() { 
     $('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast'); 
     $('#slider_indicator li:nth-child(' + nextSlide + ') a').addClass('active'); 
    }); 
} 

autoslide = setTimeout("nextSlide()", 6000); 

$(function() { 
    $('#slider_indicator a').bind('click', function(e) { 
     clearTimeout(autoslide); 
     $('#slider_indicator a').removeClass('active'); 
     $(this).addClass('active'); 
     var slide_number = $(this).parent().index() + 1; 
     $('#slider li:visible').fadeOut('fast', function() { 
      $('#slider li:nth-child(' + slide_number + ')').fadeIn('fast'); 
     }); 
     e.preventDefault(); 
    }) 
    $('#selection .scrollable .items a').live('click', function(e) { 
     var self = $(this); 
     $.ajax({ 
      url: $(self).attr('href'), 
      type: 'GET', 
      success: function(body) { 
       var count = $('#selection .scrollable .items a').length - 1; 
       count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons'; 
       $(self).parent('li').fadeOut('fast', function() { 
        $('#result li a[rel="' + $(self).attr('rel') + '"]').removeClass('added'); 
        $(this).remove(); 
        $('#selection #header #count').text(count); 
       }) 
      } 
     }) 
     e.preventDefault(); 
    }) 
})

任何幫助是極大的讚賞。

來源

2012-02-17 salmane

什麼是縮進？ – elclanrs 2012-02-17 21:11:00

它停止在'火狐10.0.1'太 – diEcho 2012-02-17 21:14:04

對於控制檯event.layerX中的錯誤...使用最新版本的jquery或看到這個http://stackoverflow.com/questions/7825448/webkit-issues-with-event -layerx-and-event-layery – 2012-02-17 21:16:35

我看不到你在任何地方聲明var autoslide。

而且我想你想setInterval，不setTimeout

來源

2012-02-17 21:17:12

變量autoslide在全局範圍內。 – 2012-02-17 21:22:22

我試圖得到什麼是錯的，爲什麼它不工作，但：

var currentSlide = $(visibleSlide).index() + 1;

你並不需要包裝visibleSlide jQuery的自它已經是一個jQuery對象。

slideCount = $('#slider li').size();

通常length在這種情況下，而不是size()使用。

var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

還沒有嘗試過，它可能工作，但我認爲它可能不會是一個很好的解決方案以後。

$('#slider_indicator li:nth-child(' + nextSlide + ') a').addClass('active');

它看起來奇怪，難道是缺少報價，或有太多的空白，不知道，它只是看起來像，不會工作，但我可能是錯的。也許這是你的問題來自哪裏。

autoslide = setTimeout("nextSlide()", 6000);

我想你錯過了val就在那裏。

$('#selection .scrollable .items a').live('click', function (e)

你需要所有這些選擇器嗎？另外，我認爲live()已棄用，支持on()。

var count = $('#selection .scrollable .items a').length - 1; 
count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';

這只是讓我有同樣的感覺，它可能有時工作。我不明白你爲什麼定義count，然後用奇怪的三元操作覆蓋它。我覺得可能有更好的方法來做到這一點。

來源

2012-02-17 21:26:08 elclanrs

正如我在我的評論說，現在的工作，但在點擊事件回答它不工作，所以你可以簡單地使用

$('#slider_indicator a').bind('click', function(e){ 
    clearInterval(autoslide); 
    autoslide=setInterval("nextslide", 6000); 
});

但設置你可以使用你的nextslide變量的當前指數。

來源

2012-02-17 21:35:36

jQuery中沒有經歷過，但我想在這行你的問題出現了：

$('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast');

應該是：

$('#slider li:nth-child(" + nextSlide + ")').fadeIn('fast');

我沒有看到一個問題，但它可能只是我的電腦。

來源

2012-02-17 21:38:28

jQuery淡入淡出在Google Chrome中無法正常工作

回答

相關問題