Question

我有以下使用flexslider的滑块：

    <div class="wrapper bgded overlay" id="home-page">
    <div id="pageintro" class="hoc clear">
        <!-- ################################################################################################ -->
        <div class="flexslider basicslider">
            <ul class="slides">
                {% for news in latest_news %}
                <li>
                    <article>
                        <p>Новости и мероприятия:</p>
                        <h3 class="heading"><a href="{% url 'paparazzi:news_specific' news.id %}">{{ news.title }}</a></h3>

                    </article>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

，这是另一个滑块的jquery代码，该滑块更改flexslider（flexslider后的图层）的背景图像。但是由于某些未知的原因，背景图像在给定时间后没有变化。

        $(document).ready(function () {

        var header = $('#home-page').get(0).id;

        var backgrounds = new Array(
            'http://placekitten.com/100',
            'http://placekitten.com/300',
            'http://placekitten.com/200',
        )

        var current = 0;

        function nextBackground() {
            current++;
            current = current % backgrounds.length;
            header.css('background-image', backgrounds[current]);
        }

        setInterval(nextBackground, 1000);

        header.css('background-image', backgrounds[0]);

    });

Answer 1

我认为问题在于您将标头的ID存储在变量header中，而不是实际的标头DOM节点中，因此您正在尝试更改字符串变量的背景图片。

我认为：

var header = $('#home-page').get(0).id;

应该是：

var header = $('#home-page');

此外，如果您想更改背景图像CSS，则需要像在CSS中那样设置带有“ url”部分的完整字符串：

header.css('background-image', 'url(' + backgrounds[current] + ')');

总结，下面是完整的代码：

$(document).ready(function () {

        var header = $('#home-page');

        var backgrounds = new Array(
            'http://placekitten.com/100',
            'http://placekitten.com/300',
            'http://placekitten.com/200',
        )

        var current = 0;

        function nextBackground() {
            current++;
            current = current % backgrounds.length;
            header.css('background-image', "url(" + backgrounds[current] + ")");
        }

        setInterval(nextBackground, 1000);

        header.css('background-image',"url(" +  backgrounds[0] + ")");

    });

#home-page {
  width: 100%;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home-page">

</div>

最后一个小注释，当我使用jQuery时，我通常以“ $”开头变量名，因此我立即知道它们是什么，因此您的header变量将称为$header，这不是当然是必需的，但这有助于使内容保持可读性。

在滑块下方添加滑块

1 个答案: