Question

我正在研究jQuery滑块。目前，图像逐渐淡出，然后滑块中的下一个图像渐渐消失。但我需要的是图像相互淡化。所以在过渡期间我不会看到页面背景。

这是我的jQuery代码：

$('.slider .slide:first').addClass('active').fadeIn(900);

function rotate(index) {
     $('.slider .slide.active').removeClass('active').fadeOut(900, function() {
         $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(900);
     });   
}

$('.slider-nav li').click(function() {
    clearInterval(timer);
    $(this).siblings('.active').removeClass('active');
    $(this).addClass('active');
    var index = $(this).index('li');
    rotate(index);
    timer=setInterval(go, 5000);
    return false;
});
$('.slider-nav li:first').click();
var timer=setInterval(go, 5000);
function go() {
    var $next = $('.slider-nav li.active').next();
    if ($next.length == 0){
        $next = $('.slider-nav li:first');
    }
    $next.click();
}

有什么想法吗？谢谢！

Answer 1

你需要你自己的fadeIn - 据我所知，你需要同时淡化两者，这可能与jQuery有点混乱，但是，如果你只是写一个就会更容易同时淡化它们的简单函数（即，在几百次迭代中一个接一个地拉下不透明度）。

图像在滑块中相互淡入

1 个答案: