Question

我目前正在处理的网站（下面发布）的代码目前无法正常运行。当它只包含在index.html文件中时（意味着我的所有代码，其他库/插件被正确引用并存储在其他地方），一切都很完美。我尝试使用JQuery的加载功能来改变网站的结构，但是，当有人点击链接时，我可以将＃content-display div换成不同的信息，允许我添加JQuery动画带来无缝体验。

可能有一种更简单的方法来实现这种效果，但我现在想了解加载功能的问题，以便我可以在将来有效地将其用于项目。

我包括以下所有相关代码。我想再次播放幻灯片，然后从那里我可以自己修复其他功能。幻灯片显示使用插件MaxImage2。

的index.html：

<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Personal Portfolio of Christopher Willingham" name=
"description">
<meta content="" name="author">

<title>CWPhotography</title>
<link href="img/icons/favicon.ico" rel="icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:Light' rel='stylesheet' type='text/css'>
<link charset="utf-8" href="css/jquery.maximage.css?v=1.2" media="screen"rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
</head>

<body>
<nav class="navbar-fixed-top">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-5 col-md-offset-1">
                <a href="#" id="link-slideshow">christopher willingham photography</a>
            </div>

            <ul class="col-md-5 alignright" id="navlist">
                <li>
                    <a id="link-portfolio">portfolio</a>
                </li>

                <li>
                    <a id="link-about">about</a>
                </li>

                <li>
                    <a id="link-contact">contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid" id="content-display"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script charset="utf-8" src="js/lib/jquery.cycle.all.js" type="text/javascript"></script> 
<script charset="utf-8" src="js/lib/jquery.maximage.js" type="text/javascript"></script> 
<script src="js/lib/bootstrap.min.js"></script>

<script src="js/modules/jfunc.js">
    (function(){
            Main.init();
            Main.bindUI();
        }());
</script>

</body>
</html>

jfunc.js（位于js / modules / jfunc下，相对于索引）：

var Main = {

init: function() {

    $('#content-display').load("slideshow.html");


    $('#maximage').maximage({
        cycleOptions: {
            fx: 'fade',
            speed: 800,
            timeout: 7200,
        },
        onFirstImageLoaded: function() {
            jQuery('#cycle-loader').hide();
            jQuery('#maximage').fadeIn('fast');
        }
    });

},

bindUI: function() {

    $('#link-portfolio').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'portfolio.html',
            success: function() {
                $.get('portfolio.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });

    $('#link-about').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'about.html',
            success: function() {
                $.get('about.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });

    $('#link-contact').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'contact.html',
            success: function() {
                $.get('contact.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });

    $('#link-slideshow').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'slideshow.html',
            success: function() {
                $.get('slideshow.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });
}

};

slideshow.html（与index.html存储在同一文件夹中）：

<html lang="en">

<div id="maximage" class="mc-cycle transitDiv" >
    <div class="first-item">
        <img src="img/slideshow/slide1.jpg" alt="" width="2048" height="1152" />
    </div>
    <img src="img/slideshow/slide2.jpg" alt="" width="2048" height="1152" />
    <img src="img/slideshow/slide3.jpg" alt="" width="2048" height="1152" />
    <img src="img/slideshow/slide4.jpg" alt="" width="2048" height="1152" />
</div>

</html>

再一次，重申一下，在我尝试将代码分离到不同的对象并从js文件调用.load函数之前，我没有任何问题，所以我假设问题是我的路径或用于调用函数的语法，但我一直在尝试我能想到的一切，而我现在已经结束了。真的很感激你的帮助。

Answer 1

标签之间不能包含<script>属性和脚本的.src标记。您必须为此使用两个单独的<script>标记。

改变这个：

<script src="js/modules/jfunc.js">
    (function(){
            Main.init();
            Main.bindUI();
        }());
</script>

到此：

<script src="js/modules/jfunc.js"></script>
<script>
    (function(){
            Main.init();
            Main.bindUI();
        }());
</script>

P.S。 IIFE也似乎没有理由。你只是进行两个函数调用。没理由围绕那个包装另一个函数。

如何在这个js文件中使用Jquery的加载函数？

1 个答案: