JavaScript Dynamic Fade Background Image

Я пытаюсь изменить фоновое изображение приложения динамически с интервалом в 5 секунд с 5 изображений, а затем повторить.JavaScript Dynamic Fade Background Image

Вот мой JS код:

<script type="text/javascript"> 
    $(function() { 
    var body = $('body'); 
    var backgrounds = new Array(
     'url(img/bg/bk.jpg)', 
     'url(img/bg/nb.jpg)', 
     'url(img/bg/la.jpg)', 
     'url(img/bg/ts.jpg)', 
     'url(img/bg/bh.jpg)' 
    ); 
    var current = 0; 
    function nextBackground() { 
     body.css(
     'background', 
     backgrounds[current = ++current % backgrounds.length] 
    ); 
     setTimeout(nextBackground, 5000); 
    } 
    setTimeout(nextBackground, 5000); 
    body.css('background', backgrounds[0]); 
    }); 
</script>

Вот мой CSS:

body { 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    padding-top: 40px; 
    padding-bottom: 40px; 
}

Но это не работает. Даже фон пуст-белый. <body> не имеет никаких атрибутов.

источник

2015-01-25 Hammad Ahmed

Я скопировал ваш код в jsfiddle и, похоже, работает: http://jsfiddle.net/7ty2k8zf/ - (тестирование в Chrome). Это не идеально, потому что я вижу пустой белый фон между каждым изображением, но вы, кажется, говорите, что это не работает вообще? – nnnnnn

Спасибо! Кажется, проблема с FIREFox, но я хочу, чтобы изображение полностью покрывало страницу, а не вываливалось, а также исчезать. –

Ну, полное покрытие страницы - это вопрос выбора изображений соответствующего размера (я просто использовал заполнители) и/или масштабирования изображения в вашем CSS. 'no-repeat' должен остановить черепицу (но когда вы устанавливаете фон в своем JS, это, по-видимому, переопределяет таблицу стилей). – nnnnnn

jsBin demo

Ваш скрипт довольно хорошо, я бы изменить только пару вещей:

CSS:

html, body{height:100%;} 
body { 
    background: none 50%/cover; /* full background image */ 
}

JQuery:

$(function() { 
    var body = $('body'); 
    var backgrounds = [ 
    '//placehold.it/800x600/cf5&text=1', // no need to `url(` here 
    '//placehold.it/800x600/f1f&text=2', 
    '//placehold.it/800x600/333&text=3', 
    '//placehold.it/800x600/0f0&text=4', 
    '//placehold.it/800x600/70f&text=5' 
    ]; 
    var current = 0; 

    // Preload all images // Prevent (if possible) white gaps between image load 
    for(var i=0; i<backgrounds.length; i++){ 
    var img = new Image(); 
    img.src= backgrounds[i]; 
    } 

    function nextBackground() { 
    body.css(
     "background-image", // Use background-image instead of `background` 
     "url("+backgrounds[++current % backgrounds.length]+")" // no need to `current = ` 
    ); 
    setTimeout(nextBackground, 5000); 
    } 
    setTimeout(nextBackground, 5000); 
    body.css("background-image", "url("+backgrounds[0]+")"); 
});

Для приятного fade EFX вы можете взглянуть на этот, который я ответил половину дня назад: Full screen slider with zoom in/out transition effect

источник

2015-01-25 04:25:55

JavaScript Dynamic Fade Background Image

ответ

Смежные вопросы