图像滑块CSS和jQuery

Question

我需要通过src标记的img进行更改来制作图片滑块。

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

这不是滑块，但会淡出，然后再次淡入。 （除了问题：如何在上面的例子中删除淡入和淡出之间的延迟。）

我很难用类似的方法制作滑块。

Answer 1

使用许多img标签可让您同时淡化图像。在例子中，我升级淡入淡出过渡速度以显示效果。

以下是详细解答：FIDDLE

这是一个快速的答案，有很多方法可以更容易地做到这一点，但对于我们的例子，这是我想的。