0

我正在使用 2 个不同版本的 jquery 相同插件，问题是一个只在 body 中工作，另一个在 head 中工作。

我在本教程之后尝试使用没有冲突：Using different versions of jQuery and jQueryUI together

但没什么，我想这可能与一个插件从正文调用，另一个从头部调用有关，无论如何，也许你有解决这个问题的建议：D

/*This is the head plugin*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

/*And this is the body plugin*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" ></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,3000);

        $('#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','800').attr('height','300')
            );
        }
   });
</script>
4

1 回答 1

0

不需要在头部和正文中两次导入jQuery（？）...

只需导入所有插件并在头部声明您的脚本：

<html>

<head>
    <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">
        $(document).ready(function() {
            console.log("Inside the 'head' tag you declare your plugins, scripts, css, etc...");
        });
    </script>
</head>
<body>
    <p>Inside the body you build your page with divs, img's, p's, span's, etc ...</p>
</body>

</html>

顺便说一句，我注意到您正在使用不同版本的 jQuery，1.3 和 last (1.9.1)，您应该只使用最新版本http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

并且不要忘记，jQuery 必须是第一个声明的脚本，然后是插件，然后是您自己的代码......

于 2013-02-11T01:36:18.583 回答