jquery在无限循环中动画背景图像

什么是使用js/jquery在无限循环中获取背景图像数组并循环的最佳方式？jquery在无限循环中动画背景图像

这是我到目前为止有：

//ANIMATE JUMBOTRON BACKGROUND IMAGE 
$(document).ready(function() { 
    var backgroundImage = [ 
     'url(/static/images/slideshow/slide0.jpg)', 
     'url(/static/images/slideshow/slide1.jpg)', 
     'url(/static/images/slideshow/slide2.jpg)', 
     'url(/static/images/slideshow/slide3.jpg)', 
     'url(/static/images/slideshow/slide4.jpg)' 
    ]; 
    $('.jumbotron').css('background-image', backgroundImage[0]); 
})

这显然只是数组和简单的CSS，但我通过数组有点失落如何循环？

来源

2017-09-18 Sandra Willford

[setInterval的]（https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval） –

见[试图让多个背景图像周期通过与CSS和JQUERY幻灯片]（https://stackoverflow.com/questions/30388118/trying-to-make-multiple-background-images-cycle-through-a-slideshow-with-css-and/） – guest271314

一个计数器变量和一个window.setInterval应该做你。每次interval'd功能运行时，计数器增加 - 一旦你打的背景图像数组的长度重置回至0

var backgroundImages = [ 
    'url(/static/images/slideshow/slide0.jpg)', 
    'url(/static/images/slideshow/slide1.jpg)', 
    'url(/static/images/slideshow/slide2.jpg)', 
    'url(/static/images/slideshow/slide3.jpg)', 
    'url(/static/images/slideshow/slide4.jpg)' 
], 
backgroundImageCounter = 0, 
jumbotron = $('.jumbotron'); 

window.setInterval(function() { 
    jumbotron.css('background-image', backgroundImages[backgroundImageCounter]); 

    backgroundImageCounter++; 
    if(backgroundImageCounter >= backgroundImages.length) { 
     backgroundImageCounter = 0; 
    } 
}, 5000);

来源

2017-09-18 16:23:48 Scoots

是啊我不太了解setInterval，所以非常感谢你的帮助 –

有这个东西叫做setInterval。

var count = 0; 
 
var div = document.getElementById('a'); 
 
var btn = document.getElementById('b'); 
 

 
var interval = setInterval(function(){ 
 
     div.innerText = count; 
 
     count++; 
 
    }, 1000); 
 
    
 
btn.addEventListener('click', function(){ 
 
    clearInterval(interval); 
 
});

<div id="a">0</div> 
 

 
<button id="b">Stop</button>

来源

2017-09-18 16:25:51

jquery在无限循环中动画背景图像

回答

相关问题