2

我不确定我做错了什么。我试图让我的 div 的背景图像随着时间的推移而改变。我从这个站点获得了 jQuery 函数，但它对我不起作用。任何线索我做错了什么。

jQuery

$(window).load(function () {
    var images = ['wave_01.png', 'wave_02.png'];
    var i = 0;

    function changeBackground() {
        $('main').css('background-image', function () {
            if (i >= images.length) {
                i = 0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 3000);
});

HTML

<div class="main"></div>

CSS

.main {
    background-image: url(../images/wave_01.png);
    background-repeat:no-repeat;
    background-size: 100% 40%;
}
4

4 回答 4

1

试试这个：现场演示

HTML（没有问题）

<div class="main" ></div>

CSS

如果您使用的是空div的，则不会显示背景。

.main {
    background-image: url(wave_01.png);
    background-repeat:no-repeat;
    background-size: 100% 40%;
    width:200px;
    height:200px;
}

jQuery

使用$(document).ready. 对主类使用.main选择器。确保图像文件的路径在数组中正确。

$(document).ready(function () {
    var images = ['wave_01.png', 'wave_02.png'];
    var i = 0;

    function changeBackground() {
        $('.main').css('background-image', function () {
            if (i >= images.length) {
                i = 0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 3000);
});
于 2013-02-04T04:29:52.567 回答
0

您的选择器有错字。你有'main'，但意思是'.main'。

于 2013-02-04T03:44:18.597 回答
0

您的 main 选择器有问题。您必须使用 .main 来根据 className 选择元素

试试下面的代码。

$(window).load(function(){
     var images = ['wave_01.png','wave_02.png'];
    var i = 0;

    function changeBackground() {
    $('.main').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
    });
}
// Call it on the first time
changeBackground();
// Set an interval to continue
setInterval(changeBackground, 3000);
});
于 2013-02-04T04:00:37.753 回答
0

您的 JavaScript 中的图像路径是否正确？你有：

var images = ['wave_01.png', 'wave_02.png'];

但在你的 CSS 中是：

background-image: url(../images/wave_01.png);

这表明图像与 Javascript 位于同一文件夹中。是这样吗？如果您的项目是这样构建的，这不一定是不正确的，但值得检查。我认为实际上这可能是一个错误，因为它也需要您的 Javascript 在“图像”文件夹中才能工作。

如果您的 CSS 和 Javascript 都在同一个 HTML 文件中，请使路径相同，即

var images = ['../images/wave_01.png', '../images/wave_02.png'];

如果您不确定，请尝试使用绝对路径（例如'/images/wave_01.png'）来代替。

另外，不确定它是否只是一个错字，但选择器$('main')肯定应该是$('.main')。

于 2013-02-04T04:10:29.530 回答