Fading Background Images

Question

Я использую простой скрипт для изменения фонового изображения моего сайта каждые X секунд. То, что я хотел бы сделать, это включить какую-то анимацию затухания или переход от одного изображения к другому. Каков наилучший способ достичь этого?

Я не очень хорошо знаком с Javascript, поэтому ПОЖАЛУЙСТА, несите меня. :)

<script type="text/javascript"> 
    var images = ['bg1.png', 'bg2.png', 'bg3.png']; 
    var curImage = 0; 
    function switchImage() 
    { 
     curImage = (curImage + 1) % images.length 
     document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')' 
    } 
    window.setInterval(switchImage, 5000); 
</script> 

Я прочитал снова и снова и не понимаю, пожалуйста, так, пожалуйста, кто-нибудь дать мне рабочий код, поэтому я могу скопировать и вставить и избавиться от этой раздражающей работы. пример здесь http://preferredmerchantservices.net/

Answer 1

Кажется, что никто не использует старомодные скрипты js для достижения такого рода анимаций. Я бы рекомендовал вам использовать jQuery или другие библиотеки javascript, которые в основном являются абстракционным слоем для функций браузера javascript.

А также вы можете найти множество примеров, плагинов и т. Д. Для эффектов перехода, подобных тому, что вы упомянули.

1. Плагин для эффектов перехода: http://malsup.com/jquery/cycle/
2. сайт JQuery, который очень легко и взял пару дней для меня, чтобы узнать его: http:///www.jquery.com

Надеется, что это помогает.

Answer 2

• сделать DIV тех же размеров, как вашим образом
• установить изображение в качестве CSS фона
• поставил второе «передний план» изображение в DIV с нулевой непрозрачностью
• выцветанию на втором изображении
• подкачки, что изображение -> сделать его CSS фон из DIV
• установить непрозрачность изображения переднего плана к нулю
• свопа на переднем плане изображения для п внутр один
• повтор

Answer 3

Только в случае, если вам нужно код переписан для JQuery. Здесь:

<script type="text/javascript"> 
    var images = ['bg1.png', 'bg2.png', 'bg3.png']; 
    var curImage = 0; 
    var timer; 
    function switchImage() { 
     $('body').css({'backgroundImage':'url(images/' + images[curImage] + ')'}; 
     curImage == images.length? curImage = 0; curImage++; 
     clearInterval(timer); 
     timer = setInterval(switchImage, 5000);   
    } 
    timer = setInterval(switchImage, 5000);   
</script> 

Хотелось бы отметить, что это не затухает в фоновом режиме. Для этого вы можете использовать контейнер для фонового изображения. Возможно, что-то, что приспосабливается к изменению размера.

// Resize Handler 
$(window).resize(function() { 
    resizePages(); 
}); 

function resizePages() { 

    var width = $(window).width(); 
    var height = $(window).height(); 

    $('.backgroundContainer').css({'width': width}); 

    /* 
     .contentWrapper would be where all your page's content is placed 
     .backgroundContainer is a class for a div placed out side teh contentWrapper 
     It would have a lower z-index than .contentWrapper but higher than body. 
    */ 


    /* 
     This makes sure that the background image is the same height as 
     either the windows of the .contentWrapper (whichever is larger) 
    */ 
    if (height > $('.contentWrapper').height()){ 
     $('.backgroundContainer').css({'height': height}); 
    } else { 
     $('.backgroundContainer').css({'height': $('.contentWrapper').height()}); 
    } 
} 

Затем вы можете настроить код переключения, чтобы угаснуть фон между переходами.