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中无法正常工作

回答

相关问题