Question

我正在为客户制作Slider。他已经完成了大部分工作，但他需要我找到一种方法让他的幻灯片交叉淡入淡出...而不是淡出和淡入。他真的想保留代码的基础。

这是fiddle。

jQuery看起来像这样：

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

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

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');
    rotate(index);
    return false;
});

setInterval(function() {
    var $next = $('.slider .slide.active').next();

    if ($next.length == 0)
        $next = $('.slider .slide:first');

    rotate($next.index());
}, 2000);

保留此代码，我需要修改它以使图像交叉淡入淡出。我知道有像jQuery Cycle这样的插件......但是我需要保留客户端的代码并对其进行修改。

谢谢！

Answer 1

我成功使用了以下功能：

function crossfade() {
   $(".slide").first().appendTo('.slider').fadeOut(200,'linear');
   $(".slide").first().fadeIn(200,'linear');
   setTimeout(crossfade, 2000);
}

$(function(){
    $(".slide").first().fadeIn(200);
    setTimeout(crossfade,2000);
});

Answer 2

你需要将你的幻灯片置于一个容器内的绝对位置1中，位于positon：relative;

然后改变你的功能

function rotate(index) {
    $('.slider .slide.active').removeClass('active').animate({'opacity' : 0});
    $('.slider .slide:eq(' + index + ')').addClass('active').animate({'opacity' : 1});
}

滑块 - 交叉淡入淡出而不是淡出和淡入淡出

2 个答案: