未捕获的ReferenceError：$ JssorArrowNavigator $未定义 - Jssor图库

时间：2016-06-08 22:15:05

标签： javascript jquery html css

我正在尝试将图片库加载到我当前的项目中，但似乎我的代码出错了。 我想将Jssor图库添加到我当前的项目中，但没有成功。 我的代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Letranger</title>
    <link rel="stylesheet" href="includes/style.css">
    <script src="includes/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="includes/javascript" src="includes/jssor.slider.mini.js"></script>

</head>

<header>
    <nav id="navigation">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">ARTICLES</a></li>
        <li><a href="#">SHOP INFO</a></li>
      </ul>
    </nav>
</header>

<body>

<div id="menuWrapper">
    <section class="backarrow">
        <a href="login.html"></a>
    </section>
    <section class="itemsGallery">
        <div id="jssor_1">
            <div data-u="loading">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
            </div>
            <div id="slides">
                <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/002.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/003.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/004.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/005.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/006.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/007.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/008.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/009.jpg" />
            </div>
            </div>
            <div data-u="navigatior" class="jssorb01" data-autocenter="1">
                 <div data-u="prototype">
                 </div>
            </div>
                    <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora13l" data-autocenter="2"></span>
        <span data-u="arrowright" class="jssora13r" data-autocenter="2"></span>
        </div>

    </section>
</div>  

  <script>
        jQuery(document).ready(function ($) {

            var jssor_1_options = {
              $AutoPlay: true,
              $SlideWidth: 600,
              $Cols: 2,
              $Align: 100,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 800);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>  
</body>

<footer>
    <div id="login">
        <section class="loginbtnfooter">
        <a href="login.html"></a>
        </section>
        <section class="logoutbtnfooter">
        <a href="login.html"></a>
        </section>
    </div>
</footer>
</html>

我的CSS文件代码是：

* {
padding:0px;
margin:0px;
}

header,section,nav,aside,footer,main, article,a {
display:block;
width: 100%;
}

header {
    width: 1005px;
    height: 310px;
    background-image: url(/images/headerIMG.png);
    position:relative;
    margin: 0 auto;
}


/* top navigation */
#navigation {    
    display: block;
    width: 100%;
    float: left;
    height: 35px;
    margin: 0px;
    padding: 0;
    position:absolute;
    bottom:0;
    opacity: 0.7;
    background-color: black;
    font-family: Arial;
    font-size: 13pt;
    font-style: normal;
    font-variant: normal;
}

#navigation ul { 
    list-style: none;
    padding: 0px 0px;
    height: 29px;
}

#navigation ul li {    
    display: inline;
    float: left; 
}
#navigation ul li a { 
    width: 179px;
    height: 28px;
    display: block; 
    padding: 0 8px; 
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    text-align: center;
    font-weight: bold; 
    margin-right: 6px;
    margin-top: 11px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#navigation ul li a:hover {
    color: #a8d6e7;
}

a {
    text-decoration: none;
    text-transform: uppercase;
}

.openfooter {
    height: 124px;
    width: 1005px;
    background-image: url(/images/openfooter.png);
    margin: 0 auto;
}

.loginpanel {
    float: left;
    margin: 12px 40px auto;
}

.loginpanel li {
    margin-left: 98px;
    padding-bottom: 5px;
    width: 195px;
    list-style-type: none;
}

.loginpanel input {
    width: 190px;
    height: 17px;
    background-color: #171717;
    border: 1px solid #423e3e;
    color: white;
}

.openfooter .submitbtn {
    background-image: url(/images/loginbtnOF2.png);
    background-repeat: no-repeat;
    height: 20px;
    width: 56px;
    margin-left: 161px;
    margin-top: 29px;
    border: 1px solid #423e3e;
    border-radius: 1px;
}

.openfooter .resetbtn {
    background-image: url(/images/resetbtn.png);
    background-repeat: no-repeat;
    height: 20px;
    width: 56px;
    margin-left: 12px;
    margin-top: 29px;
    border: 1px solid #423e3e;
    border-radius: 1px;
}

.openfooterblack {
    height: 124px;
    width: 1005px;
    background-color: black;
    margin: 0 auto;
}

footer {
    height: 32px;
    width: 1005px;
    background-image: url(/images/footer.png);
    background-repeat: no-repeat; 
    margin: 0 auto;
}
/*

#login .loginbtnfooter {
    background-repeat: no-repeat;
    height: 15px;
    background-image: url(/images/loginfooter.png);
    width: 35px;
    margin-left: 41px;
    margin-top: 9px;
    display: inline-block;
}
*/

#login .loginbtnfooter a {
    background-repeat: no-repeat;
    height: 15px;
    background-image: url(/images/loginfooter.png);
    width: 35px;
    margin-left: 41px;
    margin-top: 9px;
    display: inline-block;
    float: left;
}

#login .logoutbtnfooter a {
    background-repeat: no-repeat;
    height: 15px;
    background-image: url(/images/logoutfooter.png);
    width: 40px;
    margin-left: 14px;
    margin-top: 9px;
    display: inline-block;
    float: left;
}

/*
#login .content {    
    line-height: 20px;
    display: inline-block;
    background-image: url(/images/loginfooter.png);
}
*/

#wrapper {
    width: 1005px;
    margin: auto;
    height: 337px;
    background-image: url(/images/mainArea.png);
    background-repeat: no-repeat; 
}

#menuWrapper {
    width: 1005px;
    margin: auto;
    height: 699px;
    background-image: url(/images/designersPage.png);
    background-repeat: no-repeat; 
}

#menuWrapper .backarrow a {
    width: 31px;
    height: 40px;
    background-image: url(/images/leftarrow.png);
    background-repeat: no-repeat; 
    display: inline-block;
    float: left;
    margin-top: 88px;
    margin-left: 2px;
}

#wrapper .designerbtn a {
    background-image: url(/images/designers.png);
    background-repeat: no-repeat;
    width: 114px;
    height: 14px;
    margin-left: 445px;
    margin-top: 238px;
    display: inline-block;
    float: left;
}

.itemsGallery {
    width: 666px;
    height: 501px;
    margin-left: 265px;
    margin-top: 199px;
    display: inline-block;
    float: left;
}

 .jssorb01 {
    position: absolute;
}

.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
    position: absolute;
    /* size of bullet elment */
    width: 12px;
    height: 12px;
    filter: alpha(opacity=70);
    opacity: .7;
    overflow: hidden;
    cursor: pointer;
    border: #000 1px solid;
}

.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

.jssora13l, .jssora13r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 40px;
    height: 50px;
    cursor: pointer;
    background: url('img/a13.png') no-repeat;
    overflow: hidden;
}

.jssora13l { background-position: -10px -35px; }
.jssora13r { background-position: -70px -35px; }
.jssora13l:hover { background-position: -130px -35px; }
.jssora13r:hover { background-position: -190px -35px; }
.jssora13l.jssora13ldn { background-position: -250px -35px; }
.jssora13r.jssora13rdn { background-position: -310px -35px; }

#jssor_1 {
    position: relative; 
    margin: 0 auto; 
    top: 0px; 
    left: 0px; 
    width: 800px; 
    height: 300px; 
    overflow: hidden; 
    visibility: hidden;
}

#loading {
    position: absolute; 
    top: 0px; 
    left: 0px;
}

#slides {
    cursor: default; 
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 800px; 
    height: 300px; 
    overflow: hidden;
}

#navigator {
    bottom:16px;
    right:16px;
}

#prototype {
    width:12px;
    height:12px;
}

.jssora13l {
    top:0px;
    left:30px;
    width:40px;
    height:50px;
}

.jssora13r {
    top:0px;
    right:30px;
    width:40px;
    height:50px;
}

我做错了什么？我应该把标签放在哪里？

谢谢你， 汤姆

1 个答案:

答案 0 :(得分：0)

script标记中有拼写错误：

<script type="includes/javascript" src="includes/jssor.slider.mini.js"></script>

这应该是：

<script type="text/javascript" src="includes/jssor.slider.mini.js"></script>

或者完全省略type属性，HTML5中不再需要它：

<script src="includes/jssor.slider.mini.js"></script>

此外，jQuery(document).ready(function($) {})不应在参数列表中包含美元（$）符号。它应该是jQuery(document).ready(function() {})

相关问题
最新问题