Ротатор баннеров с изменением цвета bg и исчезновением JavaScript

Question

У меня есть следующий код:

<script type="text/javascript">
    var imgs = new Array("images/banner2.jpg", "images/banner3.jpg", "images/banner4.jpg");
    var alt = new Array();
    var bgcolor = new Array("#202020", "#00040F", "#202020");
    var currentAd = 0;
    var imgCt = 3;

    function cycle() {
        if (currentAd == imgCt) {
            currentAd = 0;
        }
        var div = document.getElementById('banner_bar');
        div.style.backgroundColor = bgcolor[currentAd]
        var banner = document.getElementById('adBanner');
        banner.src = imgs[currentAd]
        banner.alt = alt[currentAd]
        currentAd++;
    }
    window.setInterval("cycle()", 8000);        
</script>   
<div id="banner_bar">
    <img class="banner" src="images/banner4.png" id="adBanner"> 
</div>

Смена фона и изображения работает отлично, но я не могу заставить фейдер работать. Он либо ломает ротатор, либо просто ничего не делает. Любые мысли о том, как я мог бы сделать это с переписать код вращения?

РЕДАКТИРОВАТЬ: Я не знаю, если я даже на правильном пути здесь, но если кто-то может подтолкнуть меня в правильном направлении, я был бы признателен

    <script type="text/javascript">
        var imgs = new Array("images/banner2.jpg","images/banner3.jpg","images/banner4.jpg");
        var alt = new Array();
        var bgcolor = new Array("#FFF","#00040F","#000");
        var currentAd = 0;
        var imgCt = 3;
        function cycle() {
            if (currentAd == imgCt) {
                currentAd = 0;
            }
            $("#banner_bar").fadeOut(3000, function () {
                var div = document.getElementById('banner_bar');
                div.style.backgroundColor=bgcolor[currentAd]
                var banner = document.getElementById('adBanner');
                banner.src=imgs[currentAd]
                banner.alt=alt[currentAd]
                currentAd++;
            ) };
        }
        window.setInterval("cycle()",5000);
    </script>
    <div id="banner_bar">
        <img class="banner" src="images/banner4.jpg" id="adBanner">
    </div>

Answer 1

Если кому-то интересно об этом. Я в конце концов использовал http://jquery.malsup.com/cycle/. Это было предложено здесь раньше. Я добился изменения цвета фона с помощью обратного вызова моей собственной функции с использованием следующего кода:

    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            timeout: 5000,
             speed:   500,
            before: midBG,
            after: finalBG
        });
    });
    var fbgcolor = new Array("#313131","#000","#00040F","#FFF");
    var fcurrentAd = 0;
    var fimgCt = 4;
    function finalBG() { 
        if (fcurrentAd == fimgCt) {
                fcurrentAd = 0;
        }
        var fdiv = document.getElementById('banner_bar');
        fdiv.style.backgroundColor=fbgcolor[fcurrentAd]
        fcurrentAd++; 
    } 
    var mbgcolor = new Array("#989898","#191919","#000208","#808287");
    var mcurrentAd = 0;
    var mimgCt = 4;
    function midBG() { 
        if (mcurrentAd == mimgCt) {
                mcurrentAd = 0;
        }
        var mdiv = document.getElementById('banner_bar');
        mdiv.style.backgroundColor=mbgcolor[mcurrentAd]
        mcurrentAd++; 
    } 
</script>

Это может быть немного грубо, но это работает. Я буду продолжать публиковать здесь, как будто я делаю какие-либо изменения или улучшения! Спасибо за совет, ребята.

~ Matt

Answer 2

Как упомянуто Pointy, нет никаких изменений, сделанных через любое исчезновение.

Answer 3

Если вы хотите, чтобы что-то исчезло без использования jQuery, вы можете использовать CSS и назначить свойства замирания с альфа-прозрачностью, аналогично тому, что было сделано здесь - http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation

Хотя я обычно уже использую jQuery в своих проектах, поэтому я использую.fade(); потому что я ленивый.