0

我正在尝试制作一个 jquery 图像滑块，但由于某种原因，淡入不起作用。这是我的代码： 

sliderInt = 1;
sliderNext = 2;

function startSlider() {
    count = $('#slider>a').size();
    loop = setInterval(function() {


        if (sliderNext > count) {
            sliderNext = 1;
            sliderInt = 1;
        }

        $('#slider>a').fadeOut(1000);
        $('#slider>a#'+sliderNext).show('fade',1000);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;
    },3000);
}

function stopLoop() {
    window.clearInterval(loop);
}

$('#slider>a#1').fadeIn(1000);
    startSlider();
    $('#slider>a').hover(function() {
        stopLoop();
    },function() {
        startSlider();
});

第一次淡入很好，淡出总是有效，但$('#slider>a#'+sliderNext).fadeIn(1000);不起作用

4

1 回答 1

0

编辑：我认为问题是你的

$('#slider>a#'+sliderNext).show('fade',1000);

你不能show()像以前那样打电话，传入fade。改为使用.fadeIn(1000)。此外，您可以将选择器简化为，$('#' + sliderNext')因为 ID 是唯一的。
我可以在您的代码中看到的另一个错误是在您的startSlider函数中，您需要初始化sliderNext为2，而不是1.

编辑2：您的小提琴中的问题是在淡入淡出过渡期间，图像淡入和图像淡出都正在显示。正在淡入的图像被overflow: hidden. 一旦旧图像完成淡出，新图像向左移动以占据旧图像所在的空间。（我希望这是有道理的）。所以新图像正在淡入，它只是被切断了。您可以通过将 的fadeIn()回调函数放入内部来修复它fadeOut()，例如

$('#slider > a').fadeOut(1000,function(){
  $('#slider>a#'+sliderNext).show('fade',1000);
})
于 2013-07-13T10:41:51.193 回答