Question

我用jquery制作滑块。

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％且无缩放），然后出现上一张幻灯片。它看起来很难看。当我转到NEXT幻灯片时，我没有这样的问题。

怎么了？

我尝试在其上更改control-left功能：

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

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

Jquery滑块。以前的位置

1 个答案: