Question

我真的不知道问题是什么。我很新并尝试使用javascript，所以也许你知道这个问题。这是我的footer.php代码：

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Javascript for image fancybox -->
<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>    

<!-- Javascript for facebook likes -->
<div id="fb-root"></div>
<script>
(
    function(d, s, id) 
    {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }
    (document, 'script', 'facebook-jssdk')
);
</script>

<!-- Javascript -->
<script src="js/bootstrap.min.js"></script>-->

<!-- To run javascript after page load. Faster page load makes better ranking in google results. --
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "js/bootstrap.min.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else
        window.onload = downloadJSAtOnload;
</script>-->

如您所见，现在将最后一个脚本放在注释中。当我取消注释最后一个脚本（想要使用window.onload），并将$（document）.ready放在注释中时，我的轮播将不会自动开始滑动。但在这种情况下，他会。我不知道什么可能引发这个问题。我想使用window.onload，因为我正在尝试搜索引擎优化并希望我的页面尽可能快地加载。

如果你们中的任何人能够帮助我并提出问题所在，那就太棒了。这可能会帮助我更好地理解如何使用javascript。：）

提前致谢！

PS。这是我的轮播代码，但我认为问题不在于：

        <div class="row carousel-holder">

            <div class="col-lg-6 col-md-6 col-md-offset-3">

                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img class="slide-image img-thumbnail" src="img/vaas01.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="slide-image img-thumbnail" src="img/schaal01.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="slide-image img-thumbnail" src="img/schaal02.jpg" alt="">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>

            </div>

        </div>

Answer 1

尝试以这种方式初始化轮播的js：

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

使用window.onload时，Bootstrap轮播不会自动开始滑动

1 个答案: