图像滑块CSS和jQuery

Image Slider CSS and jQuery

本文关键字：jQuery CSS 图像      更新时间：2023-09-26

我需要通过更改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);

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

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

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

以下是详细的答案：FIDDLE

这是一个快速的答案，有很多方法可以更容易地做到这一点，但就我们的例子而言，我想这已经足够了。

相关文章：