2

私はこれにまったく慣れていないので、用語が不足していることをお詫びします。

私はこのサイトを見ていて、ページをリロードせずにコンテンツ/ページの変更をどのように行うのか疑問に思いました。

誰かが私を正しい方向に向けることができますか？そのJavaScriptは何ですか？CSSトランジション？jQuery？または、コードを見せてもらえますか？どんな助けでも素晴らしいでしょう。私はしばらく探していましたが、そのようなものは見つかりませんでした...

4

3 に答える 3

3

これは単純なスライダーであり、スライド画像の代わりに、コンテンツ（ネストされたdiv、img、リスト）をスライドさせます。私はあなたのためにコードをチェックし、このjQueryプラグインを使用しています：SudoSliderプラグイン

独自のプラグインを作成して車輪の再発明を行わないでください。ここでいくつかのデモを見ることができますが、これは自動高さを使用した例に非常に近いものです。これはあなたがあなたのサイトでそれを使うことができる方法です：

Jquery

<script type="text/javascript" >
    $(document).ready(function(){   
        var sudoSlider = $("#slider").sudoSlider();
    });
</script>

HTML

<div id="slider" >
    <ul>
        <li><div> .... </div></li>
        <li>Lorem ipsum text + image</li>
        <li>List, maps, ...</li>
    </ul>
</div>
于 2012-12-03T07:58:18.357 に答える
2

JQueryアニメーションです。これは（非常に滑らかですが、それでも）典型的なカルーセル効果であり、表示されている画面を超えて拡張するスライダーdivがあり、その左マージンがアニメーション化されて効果が作成されます。

基本的な効果を作成するのは簡単です（ただし、もちろん、リンクと同じくらい見栄えのするものを作成するには多くの作業が必要です）。

  1. overflow-x: hiddenコンテナdivに設定
  2. コンテナ内にスライダーdivを追加し、スライダー内の要素をスライドさせます
  3. ナビゲーションボタンを追加し、クリックするとスライダーの左オフセットをアニメーション化します（現在の位置を追跡します）

これが本当に基本的な例です。

于 2012-12-03T07:44:41.210 に答える
0

私は言及されたすべてのオプションを使用することが可能であると言うことができます:)

基本的に、http：//bxslider.com/のようなものを使用して、リストアイテム内のimg要素を使用する代わりに、いくつかのコンテンツアイテムを使用して目的を達成できます。

于 2012-12-03T07:44:00.960 に答える