简单旋转木马抛出TypeError

时间:2012-11-05 18:24:44

标签: jquery carousel

我正在我的本地和测试环境中实现一个jquery简单轮播,它运行得很好,但是一旦我将它移动到我的生产环境中,就会抛出一个控制台错误。该脚本可以找到here

这是我收到的错误:

  

TypeError:$(“ul.carousel”)。simplecarousel不是函数

我一直在环顾四周,找不到任何与这个问题有关的内容,除了这里的老帖子没有帮助。我正在使用一个非常基本的实现,如here

非常感谢任何帮助。我尝试过4种不同的滑盖包无济于事。我一直收到类似的错误。

这是我的代码:

    <style>
    ul.carousel {padding:0;margin:0;}
    #carousel-wrap {width:790px;height:565px;}
    #carousel-wrap span.next {
        position:absolute;
        top:15%;
        right:170px;
        z-index:999;
        width: 28px;
        height: 80px;
        text-indent: -999999px;
        background: url(http://www.3balls.com/images/homepage/ed_next.png) no-repeat 4px 0px;
        cursor:pointer;
    }
    #carousel-wrap span.prev {
        position:absolute;
        top:15%;
        left:0;
        z-index:999;
        width: 28px;
        height: 80px;
        text-indent: -999999px;
        background: url(http://www.3balls.com/images/homepage/ed_prev.png) no-repeat -4px 0px;
        cursor:pointer;
    }
    </style>


    <script type="text/javascript">
        jQuery(document).ready(function() {
            $("ul.carousel").simplecarousel({
                width:790,
                height:565,     
                auto: 4000,
                next: $('.next'),
                prev: $('.prev')
            });
        });    
    </script>

    <div id="carousel-wrap">
    <ul class="carousel">
      <li><img src="http://www.3balls.com/images/homepage/ads/ad_fallingprices.png" alt="Main Feature" usemap="#Map6" border="0" /></li>
      <li><img src="http://www.3balls.com/images/homepage/ads/ad_fallingprices.png" alt="Main Feature" usemap="#Map5" border="0" /></li>
      <li><img src="http://www.3balls.com/images/homepage/ads/ad_fallingprices.png" alt="Main Feature" usemap="#Map4" border="0" /></li>
    </ul>
    <span class="prev">prev</span>
    <span class="next">next</span> 
    </div>

2 个答案:

答案 0 :(得分:2)

试试这个:

<script type="text/javascript">
    var $jq = jQuery.noConflict();
    $jq(document).ready(function() {
        $jq("ul.carousel").simplecarousel({
            width:790,
            height:565,     
            auto: 4000,
            next: $jq('.next'),
            prev: $jq('.prev')
        });
    });    
</script>

答案 1 :(得分:1)

如果您想继续使用$ -sign,可以试试这个

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("ul.carousel").simplecarousel({
        width:790,
        height:565,     
        auto: 4000,
        next: $jq('.next'),
        prev: $jq('.prev')
    });
});
</script>