Question

这是文件链接： http://www.webeetech.com/Projects/Test/slider.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="w3.org/1999/xhtml">;    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Slider</title>
        <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
        <script type="text/javascript">
            $("#slideshow > div:gt(0)").hide();
            setInterval(function() {
                $('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
            }, 3000);
        </script>
        <style>
            #slideshow {
                margin: 50px auto;
                position: relative;
                width: 240px;
                height: 240px;
                padding: 10px;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
            }
            #slideshow > div {
                position: absolute;
                top: 10px;
                left: 10px;
                right: 10px;
                bottom: 10px;
            }
        </style>
    </head>

任何人都可以帮忙吗？

提前致谢。

Answer 1

好像你无法正确加载jQuery：

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

导致此错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

以及：

Uncaught ReferenceError: $ is not defined

因为1.2.6已经过时了，所以更正你的路径或更好地使用CDN和更高版本：

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

您还需要将jQuery代码包装在DOM就绪处理程序中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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 Slider Code不起作用

1 个答案: