javascript - 图像 slider CSS 和 jQuery

Question

我需要通过更改 img 标记的 src 来制作图像 slider 。

<div style="overflow : hidden; ">
    <img class="img-responsive" id="page-body-bg" src="images/ccbg1.jpg" style=" left : 0; display : absolute;">
</div>

CSS 片段是

#page-body-bg
{
    width : 100%;
}

我试过的是

setInterval(function() { 
  $("#page-body-bg").fadeOut(200, function() {
    $("#page-body-bg").attr("src","images/ccbg2.jpg");
  }).fadeIn(200);
}, 3000);

这不是 slider ，但它会淡出然后再次淡入。(除了问题:如何消除上面示例中淡入和淡出之间的延迟。)

我在用类似的方法制作 slider 时遇到了困难。

Answer 1

使用多个 img 标签可以同时淡出图像。在示例中，我调高淡入淡出过渡速度以向您展示效果。

这里是详尽的答案:FIDDLE

这是一个快速的回答，有很多方法可以更轻松地做到这一点，但对于我们的示例，我想这已经足够了。