Question

我正在尝试制作一个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);不起作用

Answer 1

编辑：我认为问题是你的

$('#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);
})

图像滑块不会褪色

1 个答案: