无法使用jquery插件来处理简单的html测试

时间:2014-07-02 03:54:27

标签: javascript jquery html5 jquery-plugins web

这里javascript / jquery和html相当新。

我试图演示找到here的vegas JQuery插件,但我无法显示背景。

我的测试页根有文件夹:css,images,js,vegas。

根据我的理解,为了让jQuery工作,我从jQuery主页下载了.js文件,然后将该.js文件放入我为测试页面制作的js文件夹中。

感谢任何帮助。提前谢谢。

<!DOCTYPE HTML>
    <html>
        <head>
            <title>backgroundTest</title>

            <script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
            <script type="text/javascript" src="/vegas/jquery.vegas.js"></script>
            <link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css"/>

            <script>    

            $(function() {
              $.vegas({
                src:'/images/abstract.jpg'
              });
              $.vegas('overlay', {
                src:'/vegas/overlays/13.png'
              });
            });
            </script>

        </head>

        <body>

            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>

        </body>

    </html>

1 个答案:

答案 0 :(得分:0)

我为拉斯维加斯滑块编写代码请注意我使用CDN加载JS和CSS。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>

        <link rel="stylesheet" type="text/css" href="http://jaysalvat.github.io/vegas/releases/latest/jquery.vegas.min.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://jaysalvat.github.io/vegas/releases/latest/jquery.vegas.min.js"></script>
        <script>
            $(function () {

                $.vegas('slideshow', {
                    backgrounds: [
                        { src: 'images/1.png', fade: 1000 },
                        { src: 'images/2.png', fade: 1000 }
                    ]
                })('overlay');});
        </script>
    </head>
    <body>

    </body>
</html>