Question

我遇到了一个使用jQuery制作的简单幻灯片的问题。该脚本适用于除谷歌浏览器以外的所有其他浏览器。您可以找到实际网站here

它有两个问题：

幻灯片自动启动但在第二张幻灯片后停止。
如果单击幻灯片指示符（....），有时会显示该幻灯片的背景图像（通过CSS应用），有时会保持隐藏状态。

最重要的是，我收到了这个错误：

event.layerX和event.layerY在WebKit中被破坏和弃用。它们将在不久的将来从发动机中移除。

这是我正在使用的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();
    })
})

非常感谢任何帮助。

Answer 1

我试图弄错了，为什么它不起作用，但是：

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

您不需要在jQuery中包装visibleSlide，因为它已经是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然后用一个奇怪的三元操作覆盖它。我觉得可能有更好的方法来做到这一点。

Answer 2

我没有看到你在任何地方声明var autoslide。

我认为您需要setInterval，而不是setTimeout

Answer 3

正如我在评论中回答的那样现在正在运作但是在点击事件中它没有用，所以你可以简单地使用

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

但是要设置当前索引，您可以使用nextslide变量。

Answer 4

在jQuery中没有经验，但我认为你的问题出现在这一行：

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

应该是：

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

虽然它可能只是我的电脑，但我没有看到问题。

jQuery fadein和out在Google Chrome中无法正常运行

4 个答案: