Javascript/jQuery-带有淡入淡出的动画背景更改(无限) [英] Javascript/jQuery - Animated Background change with fade (infinite)

问题描述

我想每3秒更改div的背景.这需要循环，所以一旦最后一个背景图像显示出来，它就会循环回到第一个背景，依此类推.我这样做很麻烦.

I am wanting to change the background of a div every 3 seconds. This needs to loop round so once the last background image shows it loops back to the first one and so on and so on. I'm having trouble doing so.

在此之前，我发了一个非常模糊的帖子，没有得到帮助.

I made a post previous to this which was VERY vague and didn't get help.

    function animate() {  
    change1();
    change2();
    change3();
}
function change1() {  
       window.setInterval(function(){
        $('.content').css('background-image','url(http://crondon.guko.co.uk/wp-content/uploads/2015/11/bride_groom_baronial_hall1.jpg)');$('.content').css('transition','background 1s linear');
    },3000);
    }
    function change2() {  
       window.setInterval(function(){
        $('.content').css('background-image','url(http://crondon.guko.co.uk/wp-content/uploads/2015/11/confetti.jpg)');$('.content').css('transition','background 1s linear');
    },3000);
    }
    function change3() {  
       window.setInterval(function(){
        $('.content').css('background-image','url(x)');$('.content').css('transition','background 1s linear');
    },3000);
    }
    animate();

推荐答案

您完全使此任务复杂化了.只需使用URL创建一个数组和一个将设置幻灯片URL，播放过渡并设置标记下一个幻灯片索引的变量的函数.然后用setInterval()调用此函数.

You totally overcomplicated this task. Just create an array with the URLs and a function that will set the slide URL, play the transition and set a variable that marks the next slide index. Then call this function with setInterval().

var currentIndex = 0;
var urls = [
    'http://crondon.guko.co.uk/wp-content/uploads/2015/11/bride_groom_baronial_hall1.jpg',
    'http://crondon.guko.co.uk/wp-content/uploads/2015/11/confetti.jpg',
    'http://media.caranddriver.com/images/media/51/dissected-lotus-based-infiniti-emerg-e-sports-car-concept-top-image-photo-451994-s-original.jpg'
];
var length = urls.length - 1;

function slide() {
    $('.content').css('background-image', 'url(' + urls[currentIndex] + ')');
    $('.content').css('transition', 'background 1s linear');
    currentIndex = (currentIndex < length) ? currentIndex + 1 : 0;
}

slide();

window.setInterval(slide, 3000);

.content {
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>

这篇关于Javascript/jQuery-带有淡入淡出的动画背景更改(无限)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！