[英]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.