Jquery slider 。以前的职位

Question

我正在用 jquery 制作 slider 。

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

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

当我转到上一张幻灯片时，当前图像会在一秒钟内返回到原始状态(比例为 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()