圖像滑塊CSS和jQuery

Question

我需要通過更改img標簽的src來制作圖像滑塊。

<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

這是一個快速的答案，有很多方法可以更輕松地完成此操作，但是以我們為例，我想這足夠了。