javascript - 背景色の変更とフェードの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>

少し粗雑かもしれませんが、機能します。何か変更や改善をしたかのように、ここに投稿し続けます！アドバイスをありがとう。

〜マット

Answer 2

jQueryを使用せずに何かをフェードさせたい場合は、CSSを使用して、ここで行われたことと同様に、アルファ透明度でフェードプロパティを割り当てることができます - http://tech.pro/tutorial/725/javascript-tutorial-simple-fade -アニメーション。

通常、私は自分のプロジェクトですでに jQuery を使用しているので、.fade(); を使用します。私は怠け者だからです。

Answer 3

Pointy が述べたように、フェードによる変更はありません。