1

roundabout プラグインを使用してカルーセルをアニメーション化していますが、すべて動作しますが、意図したカルーセルの外観を表す画像のように同じレンダリングを取得できませんが、このリンクは現在コードの結果を表しています。

利用可能なオプションのプラグイン値をいじってみましたが、残念ながらまだ画像のようにアイテムを配置できません<li>。寸法を設定する方法も知りたいです。

私は本当にイライラして動揺しています。これは私が十分に賢くないからなのか、それとも何なのかわかりません。

$(document).ready(function() {
    $('#sample-roundabout').roundabout({
        tilt: 0.9,
        minScale: 1,
        maxsCale: 3,
        minOpacity: 1,
        duration: 400
    }, function() {
        $(this).fadeTo(500, 1);
    });
});
4

2 に答える 2

0

CSS を厳密に使用すると、次のようなことができます: http://jsbin.com/ezukov/1/edit#html,live

ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 863px;
    height: 300px;
}
li {
    height: 220px;
    width: 621px;
    background-color: #ccc;
    text-align: center;
    cursor: pointer;
}
    li.roundabout-in-focus {
    margin-top:50px;
    background:red;
    cursor: default;
}

さらに、コールバック関数を作成して、lazysusan アニメーションを実行する前に、中央のスライドをスムーズにアニメーション化することができます。または、別のものが必要な場合は、独自のラウンドアバウト シェイプ アニメーションを作成することもできます。

于 2012-08-09T19:54:19.370 に答える
0

ul の幅をより小さな値に設定する必要があります。取得しようとしているものについては、CSS スタイルシートで次のように試してください。

#sample-roundabout{
  width: 400px;
}

おそらくその値と傾きをいじってみてください。それを機能させるのにそれほど苦労することはないと思います。

于 2012-08-09T13:28:36.697 に答える