jQuery 滑块。上一个职位

Question

我正在用 jquery 制作滑块。

http://jsfiddle.net/JwmxK/

var slidePath = '.testSlider > div.slide';

var sliderDuration = 53000;

var rotate = setInterval(slideShow, sliderDuration);

$(slidePath).hide();

slideShowFirst();

$('.slider-block').hover(function() {
  clearInterval(rotate);
}, function() {
  rotate = setInterval(function() {
      slideShow();
  }, sliderDuration);
});

$('.control-right').click(slideShow);

$('.control-left').click(function() {

    $(slidePath + ':eq(-2)').fadeIn('slow');

    $(slidePath + ':last-child').fadeOut('slow').prependTo('.testSlider');
});

function slideShow() {

    $(slidePath + ':last-child').fadeOut('slow');

    $(slidePath + ':first-child').fadeIn('slow').appendTo('.testSlider');
}

function slideShowFirst() {

    $(slidePath + ':first-child').appendTo('.testSlider').show();
}

在我的滑块中有简单的 Ken Burns 效果。使用 css 动画，当前幻灯片图像正在旋转和放大。

当我转到 PREVIOUS 幻灯片时，当前图像在一秒钟内恢复到其原始状态（比例为 100%，无缩放），然后出现上一张幻灯片。它看起来很丑。当我转到下一张幻灯片时，我没有这样的问题。

怎么了？

我试图改变它的左控制功能：

$('.control-left').click(function() {

    $(slidePath + ':last-child').fadeOut('slow');

    $(slidePath + ':eq(-2)').fadeIn('slow');

    $(slidePath + ':last-child').prependTo('.reveSlider');
});

但我没有任何变化..

Answer 1

我猜你最后是指名为.control-left的按钮试试这个：

$('.control-left').click(function() {

    $(slidePath + ':eq(-2)').fadeOut('slow');  // change to .fadeOut()

    $(slidePath + ':last-child').fadeIn('slow').prependTo('.testSlider'); // change to fadeIn()
});

如果这不起作用，我不太确定没有你的 HTML，你可以试试这个

$('.control-left').click(function() {
    $(slidePath + ':last-child').fadeOut('slow').prependTo('.testSlider');
    $(slidePath + ':eq(-2)').fadeIn('slow');    
});

看看它们是如何翻转的？你应该在fadeIn()之前fadeOut()