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

像Pointy所提到的那样，任何褪色都没有变化。

Answer 2

如果你想使用jQuery来淡化w / o你可以使用CSS并指定具有alpha透明度的淡化属性，类似于此处所做的 - http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation。

虽然我通常已经在我的项目中使用jQuery，所以我使用.fade（）;因为我很懒。

Answer 3

如果有人对此感到好奇。我最后使用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>

它可能有点粗糙，但确实有效。我会一直在这里发帖，好像我做了任何改动或改进！谢谢你的建议。

〜马特

横幅旋转器与bg颜色变化和淡入淡出javascript

3 个答案: