jquery - 在 HTML 文件中实现 jQuery

Question

我在这里关注 CSS Tricks 幻灯片教程，但我似乎无法弄清楚如何实现教程的 jQuery 部分。我尝试将代码放在脚本元素之间，但没有运气。关于如何解决这个问题的任何想法？谢谢。

Answer 1

尝试在您的页面中添加它（您可以将其添加到头部，或者在您的正文标签的末尾）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
    $(function() {
        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  3000);

    });
</script>

您没有提供很多信息，但我认为您没有正确加载 jQuery。

Answer 2

放这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

在此之前的任何地方：

<script>
    $(function() {
        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  3000);

    });
</script>

Answer 3

首先，您需要将 jQuery 库导入到您的 html 文件中，将其放在标题中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

之后，将您的 css 代码放入您的 css 文件中，然后将您的 html 代码放入您的文件中。