Question

我制作了自己的内容解决方案，内容不断改变，我的问题是为什么它不起作用？
第一页的 HTML ：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
    <script charset="utf-8" type="text/javascript" src="javascript/jquery.js"></script>
    <script charset="utf-8" type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
    <div id="header"></div>
    <div id="container">
        <div class="current-content">
            <script type="text/javascript">var jsConf = {"prevId":null,"prevUrl":null,"nextId":"facts-2","nextUrl":"\/next-page\/","title":"someTitle","page":"facts-1","baseStaticDir":"\/"};</script>
            <div id="background" class="bg-facts-1"></div>
            <div class="content facts-1">
                <div class="box"></div>
                <a id="next" href="next-page/index.html"></a>
            </div>
        </div>
    </div>
</body>
</html>

第二页的

HTML ：

<div id="container">
            <div class="current-content">
                <script type="text/javascript">var jsConf = {"prevId":"facts-1","prevUrl":"\/","nextId":"facts-3","nextUrl":"\/last-eden-o-earth\/","title":"The last Eden on Earth","page":"facts-2","baseStaticDir":"\/"};</script>
                <div id="background" class="bg-facts-2"></div>
                <div class="content facts-2 blue">
                </div>
                <a id="prev" href="../default.htm"></a>
                <a id="next" href="../last-eden-o-earth/default.htm"></a>
            </div>
        </div>

更改内容的功能：

var container = $('#container'),
        contentWidth = container.width(),
        speed = 0.90 * contentWidth,
        lock = 0,
        changeContent = function(direction, toLoad){
            if(direction=='next'){
                container.append('<div class="next-content"></div>');
                toScroll = -contentWidth;
            }else{
                container.prepend('<div class="next-content"></div>').css('margin-left', -contentWidth);
                toScroll = 0;
            }

            container.css('width', contentWidth*2);
            $('.current-content, .next-content').css('width', contentWidth);
            $('.next-content').load(toLoad+' #container2', function(){

                // PSEUDO 3D                
                if(direction=='next'){                    
                    $('.next-content .content')
                        .css('margin-left', contentWidth*2)
                        .animate(
                            {'margin-left': (contentWidth/2)-485},
                            {duration: speed, easing: 'easeInOutQuad', complete: function(){
                                $('.content').css('margin-left', 'auto');
                            }}
                        );
                    $('.current-content .content')
                        .css('margin-left', (contentWidth/2)-485)
                        .animate(
                            {'margin-left': -contentWidth},
                            {duration: speed, easing: 'easeInOutQuad'});
                }else{
                    $('.next-content .content')
                        .css('margin-left', -contentWidth*2)
                        .animate(
                            {'margin-left': (contentWidth/2)-485},
                            {duration: speed, easing: 'easeInOutQuad', complete: function(){
                                $('.content').css('margin-left', 'auto');
                            }}
                        );

                    $('.current-content .content')
                        .css('margin-left', (contentWidth/2)-485)
                        .animate(
                            {'margin-left': contentWidth*2},
                            {duration: speed, easing: 'easeInOutQuad'});
                }

                container.animate({'margin-left' : toScroll},{duration: speed, easing: 'easeInOutQuad', complete: function(){

                    container.css({'margin-left':0,'width':'auto'});
                    $('.current-content').remove();
                    $('.next-content').addClass('current-content').removeClass('next-content');
                    $('.current-content').css('width','100%');
                }});
                });
        }

我认为主要问题是这个：

$('.current-content').remove();
$('.next-content').addClass('current-content').removeClass('next-content');
$('.current-content').css('width','100%');

感谢您的任何建议，帮助或评论。：）

为什么我的jQuery幻灯片解决方案不起作用？

0 个答案: