Javascript/jQuery - 动画背景变化与淡入淡出（无限）答案

【问题标题】：Javascript/jQuery - Animated Background change with fade (infinite)Javascript/jQuery - 动画背景变化与淡入淡出（无限）
【发布时间】：2015-11-08 22:14:59
【问题描述】：

我想每 3 秒更改一次 div 的背景。这需要循环，所以一旦最后一个背景图像显示它循环回到第一个，依此类推。我在这样做时遇到了麻烦。

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

    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();

【问题讨论】：

您到底遇到了什么麻烦？如果您可以提供“它不起作用”以外的细节，那将是理想的。例如，您的事件函数是否被调用？您是否尝试过在它们每个中添加console.log() 以查看它们是否被触发？您是否独立检查过您的转换是否正常？
发生的事情是它改变了一次背景，然后它淡出然后保持相同的背景。
好的。那么，在第一次触发之后，是否会再次触发事件？您需要查看问题是否在于 (a) 未调用附加到事件的函数，或者 (b) 如果再次应用，您的转换不起作用。添加console.log("Hello change 1"); 作为每个函数的第一行（根据需要更改消息）以查看发生了什么。
顺便说一句，您有三个计时器都在相同的元素上运行，因此它们很可能会“争夺”哪个应用（它们都将应用，最后一个应用）在每三秒的时间里可能是一个似乎会持续的时间）。也许注释掉最后两个并让一个开始工作？
啊 - 你想按顺序显示这些吗？如果是这样，您需要一个计时器，检测您正在显示的图像，然后转换到下一个（或循环回到第一个）。

标签： javascript jquery

【解决方案1】：

你完全把这个任务复杂化了。只需使用 URL 和一个函数创建一个数组，该函数将设置幻灯片 URL、播放过渡并设置一个标记下一张幻灯片索引的变量。然后用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>

【讨论】：