Question

如何改善图像滑块转换。这是相当不稳定的。我希望它平滑（顺利进出）。问题是图像只有fadeIn，我无法弄清楚如何fadeOut。

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

Answer 1

setInterval(function(){
    $("#top").fadeOut(function() {
        $(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
            $(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
        });
     }
    );
}, 400

Check this link also.

Answer 2

我已经为你解决了这个问题，你不需要这种东西的settimeout，还有很多其他方法。

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

改善图像滑块动画

2 个答案: