在滑块下添加滑块

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

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

我认为：

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

应该是：

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

此外，如果您想更改 background-image css，您需要使用 "url" 部分设置完整的字符串，就像您在 css 中所做的那样：

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，这当然不是必需的，但它有助于保持内容的可读性。

在滑块下添加滑块

Adding slider under the slider

javascript

jquery

flexslider