Question

我正在使用royal slider。我将以下代码直接插入到我的网站HTML中（注意：url已被省略）...

<!-- jQuery, 1.7+ is required -->
    <script  src="url"></script>
    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->
    <script src="url"></script>


    <!-- main slider style -->
    <link href="url">
    <!-- selected skin style -->
    <link href="url" rel="stylesheet">


    `<!-- slider css -->
    <style>
            /* you may put here additional slider CSS */
            /* but it'll be better if you move it to separate CSS file that your site uses */
    </style>

并将以下内容放入体内以测试...

<div id="content-slider" class="royalSlider contentSlider rsDefault">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
</div>
<script type="text/javascript">// <![CDATA[
    // Slider initialization, you may put this part of code in JS file
    jQuery(document).ready(function($) {

        // slider initialization
        $('#content-slider').royalSlider({
            // example of slider options
            controlNavigation: 'bullets',
            autoPlay: {
                enabled: true
            },
            deeplinking: {
                enabled: true,
                prefix: 'slider-'
            }
        });

    });
// ]]></script>

并且幻灯片显示根本没有加载。任何建议或帮助将不胜感激！

更新

我提出以下内容：

<div id="content-slider" class="royalSlider contentSlider rsDefault">
      <div>slide1</div>
      <div>slide2</div>
      <div>slide3</div>
    </div>
<head>

// All your <head> content goes here

<script type="text/javascript">
$(document).ready(function(){

    // slider initialization
    $('#content-slider').royalSlider({
        // example of slider options
        controlNavigation: 'bullets',
        autoPlay: {
            enabled: true
        },
        deeplinking: {
            enabled: true,
            prefix: 'slider-'
        }
    });

});
</script>
</head>

并将代码更新为以下内容......

<div id="content-slider" class="royalSlider contentSlider rsDefault">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
</div>
<p>// All yourcontent goes here</p>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){

    // slider initialization
    $('#content-slider').royalSlider({
        // example of slider options
        controlNavigation: 'bullets',
        autoPlay: {
            enabled: true
        },
        deeplinking: {
            enabled: true,
            prefix: 'slider-'
        }
    });

});
// ]]></script>

Answer 1

您应该尝试将<script>放在<head>而不是body。 $(document).ready()已经负责等待页面加载。

试试这样：

<head>

// All your <head> content goes here

<script type="text/javascript">
$(document).ready(function(){

    // slider initialization
    $('#content-slider').royalSlider({
        // example of slider options
        controlNavigation: 'bullets',
        autoPlay: {
            enabled: true
        },
        deeplinking: {
            enabled: true,
            prefix: 'slider-'
        }
    });

});
</script>
</head>

jQuery幻灯片无法加载

1 个答案: