0

我有以下代码：

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

3 回答 3

0

就像 Pointy 提到的那样，没有通过任何褪色进行任何更改。

于 2013-02-03T16:48:51.673 回答
0

如果您想使用 jQuery 使某些东西褪色，您可以使用 CSS 并分配具有 alpha 透明度的褪色属性，类似于此处所做的 - http://tech.pro/tutorial/725/javascript-tutorial-simple-fade -动画。

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

于 2013-02-03T17:06:09.873 回答
0

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

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

〜马特

于 2013-02-09T03:05:20.633 回答