javascript - 改善图像滑块动画

我如何改善图像滑块的过渡。这很不稳定。我希望它是平滑的（正确地进出平滑）。问题是图像仅淡入，我不知道如何淡出。

var nextimage = 0;
var timer = 0;
doSlideshow();

function doSlideshow() {
  if (nextimage >= images.length) {
    nextimage = 0;
  }
  $('.col-md-8')
    .css('background-image', 'url("' + images[nextimage++][0] + '")')
    .fadeIn(3000, function() {
      timer = setTimeout(doSlideshow, 3000);
    });
}

$(".col-md-8").hover(function() {
  clearTimeout(timer);
});

$(".col-md-8").mouseout(function() {
  setTimeout(doSlideshow, 3000);
});

Pen

最佳答案

我已经为您修复了此问题，您无需为此类问题设置超时，还有许多其他方法。

function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}

$('.col-md-8')
.css('background-image', 'url("' + images[nextimage++][0] + '")');
$('.col-md-8').hide().fadeIn(3000).fadeOut(2000, function() {
doSlideshow()
});
}

链接到Codepen，关于此还有更多的话要说，我将在以后做。

http://codepen.io/damianocel/pen/PzQwNr