Javascript 引导传送带_Javascript_Html

Javascript 引导传送带

javascript html

Javascript 引导传送带,javascript,html,Javascript,Html,我在实现Material Design Bootstrap的旋转木马时遇到了问题。我从他们的网站复制并粘贴了carousel示例，并且确保加载时JS和CSS的顺序正确。目前，我的页面仅呈现图像和文本，可以通过灯光效果单击，但不会显示其他图像或幻灯片，并且它从不在它们之间切换。它还会在旋转木马之后在我的屏幕上创建一个大的空白编辑：将script.php更改为script.js 编辑2：更新的index.php仍然无法完全工作： <!DOCTYPE html> <html lan

我在实现Material Design Bootstrap的旋转木马时遇到了问题。我从他们的网站复制并粘贴了carousel示例，并且确保加载时JS和CSS的顺序正确。目前，我的页面仅呈现图像和文本，可以通过灯光效果单击，但不会显示其他图像或幻灯片，并且它从不在它们之间切换。它还会在旋转木马之后在我的屏幕上创建一个大的空白

编辑：将script.php更改为script.js

编辑2：更新的index.php仍然无法完全工作：

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Site Name</title>
    <?php //include_once $_SERVER['DOCUMENT_ROOT'].'/inc/head.php'; ?>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://site/css/style.css">
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
    <!-- Custom JS -->
    <script type="text/javascript" src="https://site/js/app.js"></script>
</head>
<body>

    <header>
        <?php include $_SERVER['DOCUMENT_ROOT'].'/inc/nav.php'; ?>
    </header>

    <!--Carousel Wrapper-->
    <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-2" data-slide-to="1"></li>
            <li data-target="#carousel-example-2" data-slide-to="2"></li>
        </ol>
        <!--/.Indicators-->
        <!--Slides-->
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <div class="view">
                    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
                    <div class="mask rgba-black-light"></div>
                </div>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Light mask</h3>
                    <p>First text</p>
                </div>
            </div>
            <div class="carousel-item">
                <!--Mask color-->
                <div class="view">
                    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
                    <div class="mask rgba-black-strong"></div>
                </div>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Strong mask</h3>
                    <p>Secondary text</p>
                </div>
            </div>
            <div class="carousel-item">
                <!--Mask color-->
                <div class="view">
                    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
                    <div class="mask rgba-black-slight"></div>
                </div>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Slight mask</h3>
                    <p>Third text</p>
                </div>
            </div>
        </div>
        <!--/.Slides-->
        <!--Controls-->
        <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <!--/.Controls-->
    </div>
    <!--/.Carousel Wrapper-->       
    <div class='shell'>
        <div class='container-fluid'>
            <p class='content content-header' >Title</p>
            <p class='content content-text' >Content</p>
        </div>
    </div>
</body>
<footer>
    <?php include_once $_SERVER['DOCUMENT_ROOT'].'/inc/footer.php'; ?>
</footer>


站点名称



光罩
第一个文本
坚强的面具
次要文本
轻薄的面具
第三文本
标题
内容

编辑3：之前和之后的图片：

我封锁了敏感信息。我的所有其他页面都工作正常，CSS没有问题。只是这个旋转木马似乎不起作用。

在index.php页面的head标记中。尝试在那里添加所有脚本。现在只需从他们网站的CDN开始。。试着用这个替换你的标签。。一般来说，最好在标记中引用所有要使用的脚本和css文件

<head>         
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"> 
</script>
<link rel="stylesheet" href="https://site/css/style.css">
<script type="text/javascript" src="https://site/js/app.js"></script> 
</head>

无论是在我的服务器上还是在文件中，改变这一点似乎都不会改变我制作的这个JSFIDLE的任何东西，而且它似乎可以正常工作。小提琴在网上为我工作，但当我复制并添加到我自己的站点时，它仍然不起作用。这是我的代码中的错误吗？或者是其他什么事情可能弄糟了？不。我认为你的问题是你在写脚本的方式。看看我的答案，它应该会有帮助。现在看起来你的自定义css没有正确加载。我的建议是注释掉你头脑中的每个脚本文件和css文件，并逐一取消它们的注释。有时，它可能取决于顺序，或者在引导css中是否有规则被覆盖，例如，在自定义css中也存在规则。这会引起一些问题。这是我的建议。这样做会使旋转木马工作……但会破坏我网站/页面的其余部分。我是否可能正在使用过时版本的引导？旋转木马也只有在我包含所有这些内容时才起作用，而不仅仅是脚本，因此我认为问题与CSS无关。您还需要在head标记中包含其余的自定义脚本和CSS。也。从index.php文件中删除此行“”。请参阅我对头部内容的编辑。我已使用当前文件编辑了我的问题。现在，以前停留在按钮上的页脚现在占据了屏幕的大部分，旋转木马正在工作，我的导航条部分损坏，不再工作。我会很快贴两张照片给你看。