Question

我唯一能想到的是，我在页面末尾插入了javascript，而不是在head标签中插入，但之前从未出现过问题。

以下HTML：

<div id="sequence">
    <ul>
        <li class="animate-in">
            <div class="frame f1">
                <a href="/projects/3">
                    <img src="../../assets/projects/02.jpg"/>
                </a>
                    <div class="project_info">
                        <h1>Landscape Design & Build</h1>
                        <h2>Private Villa - Muharraq</h2>
                    </div>
            </div>
        </li>
        <li>
            <div class="frame f2">
                <a href="/projects/2">
                    <img src="../../assets/projects/03.jpg"/>
                </a>
                    <div class="project_info">
                        <h1>Landscape Design </h1>
                        <h2>Private Villa - Saar</h2>
                    </div>
            </div>
        </li>
        <li>
            <div class="frame f3">
                <a href="/projects/1">
                    <img src="../../assets/projects/01.jpg"/>
                </a>
                    <div class="project_info">
                        <h1>Landscape Design & Build</h1>
                        <h2>Private Villa - Riffa</h2>
                    </div>
            </div>
        </li>
    </ul>
</div>

从以下PHP模板生成：

<div id="sequence">
    <ul>
        <?php
            $count = 1;
            foreach ($projects as $project) { ?>
                <li<?php if ($count == 1) { ?> class="animate-in"<?php } ?>>
                    <div class="frame f<?php echo $count; ?>">
                        <a href="/projects/<?php echo $project['id']; ?>">
                            <img src="../../assets/projects/<?php echo $project['image']; ?>" />
                        </a>
                        <div class="project_info">
                            <h1><?php echo $project['type']; ?></h1>
                            <h2><?php echo $project['name']; ?></h2>
                        </div>
                    </div>
                </li>
                <?php $count++;
            }
        ?>
    </ul>
</div>

使用以下CSS：

#sequence {
    /*visibility: hidden;*/
    position: relative; /* required */
    width: 830px;
    height: 320px;
    margin: 10px auto;
    overflow: hidden;
}

    #sequence > ul li > * {
        position: absolute; /* required */
    }

    #sequence > ul > li {
        position: absolute; /* required */
        width: 100%; /* required */
        height: 100%;
        z-index: 1; /* required */
    }

    #sequence .frame {
        background: #CCCCCC;
    }

    #sequence .f1 {
        left: -1000px;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        -ms-transition-duration: 1s;
        transition-duration: 1s;
    }

我正在启动这样的序列：

$(document).ready(function() {
    // slider
    var options = {
        autoPlay: true,
        autoPlayDelay: 3000
    };
    $("#sequence").sequence(options).data("sequence");
});

Answer 1

来自README.md：

v0.9 19/3/2013

现在必须为顶级<ul>提供班级.sequence-canvas才能使序列工作

<ul class="sequence-canvas">

Answer 2

您是否尝试过使用其他网络浏览器？我在使用Chrome时遇到了同样的问题。

Jquery，Sequence.js。插件无法启动，没有可见的错误

2 个答案: