jQuery背景图像更改定时器

jQuery background image change on timer

本文关键字：定时器 图像 背景 jQuery      更新时间：2023-09-26

我有一个div:

<div class="coverImage" style="background-image:url('3.2.5''assets''img''backgroundCanvas1.jpg');"></div>

和附加的jQuery脚本，每20秒旋转一次背景

var coverChange =
{
    init: function()
    {
        var itemInterval = 20000;
        var numberOfItems = 4;
        var currentItem = 1;
        $('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
        //loop through the items
        var infiniteLoop = setInterval(function(){
            $('.coverImage').attr("style", "background-image:url()");
            if(currentItem == numberOfItems -1){
                currentItem = 1;
            }else{
                currentItem++;
            }
            $('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
        }, itemInterval);
    }
};
coverChange.init();

当图像改变时，它会把下半部分变白，直到我稍微滚动一下。我的主要要求是帮助淡化新图像。(其他都是次要的)

我已经尝试使用jQuery的fadeIn属性，但无法使它以无缝的美观方式工作。

我不是在寻找代码优雅只有功能，你可以告诉:-)

p。

你应该能够为你的coverImage元素添加一个简单的CSS过渡。

.coverImage {
    transition: background 1s;
}

我在https://jsfiddle.net/mark_c/pa44n42k/1/

创建了一个工作示例

对于渐入渐出效果，您应该在此步骤之前简单地淡出div:

$('.coverImage').attr("style", "background-image:url()");

并在此步骤后淡出:

$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");

对于淡出，你可以使用简单的jquery，我想你已经有了，但不是正确的方式，所以祝你好运。

这会给你一个很好的淡入/淡出效果。:)

相关文章：