我在使用 jQuery 制作的简单幻灯片放映时遇到问题。 该脚本在除 Google Chrome 之外的所有其他浏览器中都可以正常工作。您可以找到直播网站 here
它有两个问题:
- 幻灯片自动开始,但在第二张幻灯片后停止。
- 如果您点击幻灯片指示器 (....),有时会显示该幻灯片的背景图像(通过 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();
})
})
非常感谢任何帮助。
最佳答案
我正在尝试找出问题所在以及为什么它不起作用但是:
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
然后用奇怪的三元运算覆盖它。我觉得可能有更好的方法来做到这一点。
关于javascript - jQuery 淡入淡出在 Google Chrome 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9335425/