javascript - JQuery 未定义错误

Question

我需要执行图像滑动。我正在使用以下代码。

我的 Javascript

<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(".hero").cycle({
        fx: 'scrollDown',
        timeout: 7000,
        pause: 1,
        pager: '#slideshow-nav div'
    });
</script>

资源：-

<div class="page-slideshow narrow">
    <div class="hero">
        <img src="Image\img1.jpg" width="460" height="235" alt="" />
        <img src="Image\img2.jpg" width="460" height="235" alt="" />
        <img src="Image\img3" width="460" height="235" alt="" />
        <img src="Image\img4" width="460" height="235" alt="" />
    </div>
    <div id="slideshow-nav">
        <div>
        </div>
    </div>
</div>

CSS

body
{
}

#slideshow-nav
{
width: 700px;
height: 30px;
position: absolute;
z-index: 999;
bottom: 0;
left: 11px;
text-align: center;
text-decoration:none;
}

#slideshow-nav a
{
background: transparent url('../Image/bullet_grey - 1.png') 0 0 no-repeat;
width: 26px;
height: 26px;
text-indent: -999px;
display: inline-block;
text-decoration: none;
margin: 7px;
text-indent: -9999px !important;
margin: 7px;
text-decoration: none;
background-position:center;
border:none;
outline:none;
}
#slideshow-nav a.activeSlide
{
background-position: 0 -1000px;
background: transparent url('../Image/bullet_red.png') 0 0 no-repeat;
display: inline-block;
background-position :center;
text-decoration:none;
border:none;
outline:none;
}
.page-slideshow
{
position: relative;
margin-bottom: 15px;
text-decoration: none;
}
.page-slideshow.narrow #slideshow-nav
{
width: 460px;
left: 0;
text-decoration: none;
}

我在用 ：-

• 视觉工作室 2010,
• .Net 框架 4.0

我在VS2010中创建了一个.aspx页面，上面提供了Js、CSS和Design。上面给出的 CSS 包含在源代码中，StyleSheet1.css 但我收到了错误：-'jQuery' is undefined 请帮我解决这个错误。

Answer 1

最可能的原因是您的引用顺序错误 - JQuery-UI 依赖于 JQuery，因此“jquery-1.8.3.min.js”应该包含在依赖它的脚本之前（通常是第一个）。

<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>

也显然检查文件是否确实存在......

Answer 2

把你的代码放进去document.ready

jQuery(function($){
    $(".hero").cycle({
        fx: 'scrollDown',
        timeout: 7000,
        pause: 1,
        pager: '#slideshow-nav div'
    });
});

还包括 jquery ui 之前的 jquery 插件。

<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

Answer 3

你需要参考这个库：

 <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

参考 ：

<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
       $(document).ready(function() {
            $(".hero").cycle({
                  fx: 'scrollDown',
                  timeout: 7000,
                  pause: 1,
                  pager: '#slideshow-nav div'
        });
    });
   </script>

Answer 4

似乎您以错误的顺序包含库。jQuery UI 依赖于 jQuery，应该包含在主库之后。如果您想稍后从子文件夹加载它，您可能还希望使用相对于您的站点源的路径而不是相对于现有路径来引用它们。

<script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(".hero").cycle({
        fx: 'scrollDown',
        timeout: 7000,
        pause: 1,
        pager: '#slideshow-nav div'
    });
</script>