Question

我在wordpress主题中使用简单的jquery幻灯片时遇到了问题。我可以在标准HTML中使用它但是只要我把它放在php中我就会得到'Uncaught TypeError：Object＃没有方法'easeOutCirc'。

幻灯片已集成到标题文档

中

header.php

中的脚本

                <script type="text/javascript">
        (function($) {
            $(function() {
                $('#slideshow').cycle({
                    fx:     'scrollHorz',
                    timeout: 7000,
                    next:   '#rarr',
                    prev:   '#larr'
                });

                $(".tabContent:not(:first)").hide();
                $(".tabContent").eq(0).show();  
                $("#tabNav li:first").addClass("active");
                    $("#tabNav li").click(function(){
                        $(".tabContent").hide();
                        $("#" + $(this).attr("tagger")).show();
                        $("#tabNav .active").removeClass("active");
                        $(this).addClass("active");
                    });
            })
        })(jQuery)
    </script>

幻灯片标记（在 header.php 中）

            <div class="rotator">
            <ul id="rotmenu">
                <li>
                    <a href="rot1">Christmas Markets</a>
                    <div style="display:none;">
                        <div class="info_image">Magdeburgchristmasmarket.jpg</div>
                        <div class="info_heading">Christmas Markets</div>
                        <div class="info_description">
            From the aromas of freshly baked gingerbread, cinnamon and gluhwein to the joyous sounds of carol singers, sparkling fairy lights and pretty wooden stalls, a pre-Christmas break to one of Europe’s Christmas Markets...
                            <a href="christmas.html" class="more">Read more</a>
                        </div><!-- END description -->
                    </div><!-- END display none -->
                </li>
                <li>
                    <a href="rot2">New Story2</a>
                    <div style="display:none;">
                        <div class="info_image">olympic-logo-copy.jpg</div>
                        <div class="info_heading">New Story2</div>
                        <div class="info_description">
            Second story content to continue reading click read more after text finishes...
                            <a href="#" class="more">Read more</a>
                        </div><!-- END description -->
                    </div><!-- END display none -->
                </li>
                <li>
                    <a href="rot3">New Story3</a>
                    <div style="display:none;">
                        <div class="info_image">Loch-Lomond-beautiful-scotland-by-coach-holiday.jpg</div>
                        <div class="info_heading">New Story3</div>
                        <div class="info_description">
            ....
                            <a href="#" class="more">Read more</a>
                        </div><!-- END description -->
                    </div><!-- END display none -->
                </li>


            </ul><!-- END rot menu -->
            <div id="rot1">
                <img src="" width="900" height="300" class="bg" alt=""/>
                <div class="heading">
                    <h1></h1>
                </div>
                <div class="description">
                    <p></p>

                </div> <!-- END description -->   
            </div><!-- END rot1 -->
        </div><!-- END rotator -->

footer.php doc

中提供的脚本

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function() {
            var current = 1;

            var iterate     = function(){
                var i = parseInt(current+1);
                var lis = $('#rotmenu').children('li').size();
                if(i>lis) i = 1;
                display($('#rotmenu li:nth-child('+i+')'));
            }
            display($('#rotmenu li:first'));
            var slidetime = setInterval(iterate,4000);

            $('#rotmenu li').bind('click',function(e){
                clearTimeout(slidetime);
                display($(this));
                e.preventDefault();
            });

            function display(elem){
                var $this   = elem;
                var repeat  = false;
                if(current == parseInt($this.index() + 1))
                    repeat = true;

                if(!repeat)
                    $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                        $(this).animate({'opacity':'0.7'},700);
                    });

                current = parseInt($this.index() + 1);

                var elem = $('a',$this);

                    elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

                var info_elem = elem.next();
                $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                    $('h1',$(this)).html(info_elem.find('.info_heading').html());
                    $(this).animate({'left':'0px'},400,'easeInOutQuad');
                });

                $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                    $('p',$(this)).html(info_elem.find('.info_description').html());
                    $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
                })
                $('#rot1').prepend(
                $('<img/>',{
                    style   :   'opacity:0',
                    className : 'bg'
                }).load(
                function(){
                    $(this).animate({'opacity':'1'},600);
                    $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                        $(this).remove();
                    });
                }
            ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','900').attr('height','300')
            );
            }
        });
    </script>

我们错过了剧本中的任何内容吗？任何建议都会非常令人满意！

由于

Answer 1

jquery-ui-core句柄不包含jQuery UI Effects。请参阅codex

您可能必须从网址加载自定义jquery-ui包。下面将从谷歌cdn

加载完整的jquery UI

<?php wp_enqueue_script("myUi","https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"); ?>

未捕获的TypeError：Wordpress Jquery幻灯片 - 对象没有方法

1 个答案: