Banner rotator with bg color change and fade javascript

Question

I have the following code:

<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>

The background and image change work great but I cant get the fade to work. It either breaks the rotator or it just does nothing. Any thoughts on how I could do this with rewriting the rotation code?

EDIT: I dunno if I am even on the right track here but if anyone could nudge me in the right direction I would appreciate it

    <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

If anyone is curious about this. I wound up using http://jquery.malsup.com/cycle/ in the end. It has been suggested here before. I achieved the background color change by using a callback to my own function using the following code:

    <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>

It maybe a bit crude but it does work. I will keep posting here as if I make any changes or improvements! Thanks for you advice guys.

~Matt

Answer 2

Like mentioned by Pointy, there are no changes made via any fading.

Answer 3

If you want something to fade w/o using jQuery you could use CSS and assign fading properties with alpha transparency, similar to what has been done here - http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation.

Although I'm typically already using jQuery on my projects so I use .fade(); because I am lazy.