Question

我正在关注CSS Tricks幻灯片教程here，我似乎无法弄清楚如何实现本教程的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代码放入文件中。

将jQuery实现为HTML文件

3 个答案: