1

私が考えることができる唯一のことは、head タグではなく、ページの最後に javascript を挿入していることですが、これはこれまで問題になったことはありません。

次の 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");
});
4

2 に答える 2

2

README.mdから:

v0.9 2013 年 3 月 19 日

Sequence が機能するには、最上位レベル<ul>にクラスを指定する必要があります。.sequence-canvas

<ul class="sequence-canvas">

于 2013-04-09T07:11:42.723 に答える
0

別のウェブブラウザを使用してみましたか? Chromeを使用していたときに同じ問題が発生しました。

于 2013-04-09T07:04:44.150 に答える