javascript - 通过在 Drupal 7 中使用 JQuery 更改背景图像 CSS 属性来进行幻灯片放映

Question

我想通过定位 div 元素的 background-image 属性并使用 Jquery 更改它来创建幻灯片。我从某个网站获得了以下代码，但无法使其正常工作。

var images=new Array('/ccl/sites/default/files/Speed_Queen_Equipped.jpg','/ccl/sites/default/files/Speed_Queen_Equipped2.jpg','/ccl/sites/default/files/Speed_Queen_Equipped3.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('#homeBanner')
        .css('background-image','url("'+images[nextimage++]+'")')
        .fadeIn(500,function(){
            setTimeout(doSlideshow,1000);
        });
}

我已将我的横幅代码放在我的 drupal 元素的 page.tpl.php 页面中:

<div class="container-fluid">
    <div id="homeBanner" class="row">
        <div class="container">
            <div id="homeBannerText">
                <h1>Consulting Cleaning Laundry</h1>
                <p>Le spécialiste des solutions propreté au Maghreb et en Afrique.</p>
            </div>
        </div>
    </div>
</div>

这是应用背景图像属性的相关 CSS:

#homeBanner{background-image: url(/ccl/sites/default/files/Speed_Queen_Equipped.jpg); height:600px}
#homeBannerText{ padding-top:230px; color:white; font-size: 200%;}
#homeBannerText>h1{ font-size: 70px;}

我确实在我的 html.tpl.php 页面底部包含了对我的脚本的引用，并使用开发人员工具检查它确实显示在我的 HTML 上:

<script src="sites/all/themes/bootsfire/js/main.js"></script>

虽然没有发生任何事情，但我做错了什么？如何更改我的代码以获得我期望的行为？

Answer 1

这实际上可以通过使用动画完全使用 CSS 来实现，不需要任何 JavaScript。

这是我为您拼凑的一个简单示例。我时间有点紧迫，所以它的边缘有点粗糙，但它至少应该为您指明正确的方向。不幸的是，我也没有时间写出完整的解释，但如果有任何需要澄清的地方，请告诉我。

• > More information on animation
• > Browser support for animation

body{margin:0;}
div{
    -webkit-animation:bg linear 20s infinite;
    animation:bg linear 20s infinite;
    background:url(http://lorempixel.com/1920/480/sports) center center no-repeat;
    background-size:contain;
    margin:0 auto;
    padding:0 0 25%;
    max-width:1920px;
}
@-webkit-keyframes bg{
    5%{
        background-image:url(http://lorempixel.com/1920/480/sports);
    }
    20%,30%{
        background-image:url(http://lorempixel.com/1920/480/city);
    }
    45%,55%{
        background-image:url(http://lorempixel.com/1920/480/nightlife);
    }
    70%,80%{
        background-image:url(http://lorempixel.com/1920/480/technics);
    }
    95%{
        background-image:url(http://lorempixel.com/1920/480/business);
    }
}
@keyframes bg{
    5%{
        background-image:url(http://lorempixel.com/1920/480/sports);
    }
    20%,30%{
        background-image:url(http://lorempixel.com/1920/480/city);
    }
    45%,55%{
        background-image:url(http://lorempixel.com/1920/480/nightlife);
    }
    70%,80%{
        background-image:url(http://lorempixel.com/1920/480/technics);
    }
    95%{
        background-image:url(http://lorempixel.com/1920/480/business);
    }
}

<div></div>