繁体   English   中英

计时器上的jQuery背景图像更改

[英]jQuery background image change on timer

我有一个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属性,但是无法使其以无缝的美观方式工作。

正如您所知道的,我不是在寻找仅代码优雅的功能:-)

PS最初通过CSS加载图像无效。

您应该能够向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,因为我想您已经拥有了但不是正确的方法,所以祝您好运。

这将为您提供良好的淡入/淡出效果。 :)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM