0

私はたくさんのさまざまな試みをいじり回してきましたが、どれもリモートで成功したことさえ証明されていません。誰かが喜んで私を案内してくれるか、正しい方向に向けてくれませんか。

ページ上部の画像カルーセルとしてhttp://sorgalla.com/projects/jcarousel/Jcarouselを使用しており、一度に3つの画像が表示されます。

次のリンクhttp://tamarackcellars.com/のようなものを探していますが、ワインの1つをクリックすると、ページ全体が新しいページに読み込まれるのではなく、ページの下部にあるコンテンツが変更されます。

どんな助けでも大歓迎です。

4

1 に答える 1

0

わかりました、カルーセル プラグインを動作させることができると思います。

私の理解が正しければ、ページのコンテンツを変更したいが、リダイレクトしたくないということです。これが静的コンテンツの場合、必要なものは比較的単純で、多くの方法で解決できます。

最初にカルーセルを設定し、各画像またはコンテンツに class="carouselObj" のような同じクラスを与えます。次に、カルーセルの各要素に関して異なる情報を保持するコンテナを同じページに作成します。

<div id="container">
   <div class="info">1st image info</div>
   <div class="info">2nd image info</div>
   <div class="info">3rd image info</div>
   <div class="info">4th image info</div>
</div>

ここで jquery を追加して機能させます。ここでの考え方は、画像の 1 つがクリックまたは時限イベントによって変更されると、コンテナー内の対応する情報も変更されるということです。アイデアを提供するコードを次に示します。

$('.carouselObj').click(function(){
var index = $('.carouselObj').index(this); // gets the index of carousell image clicked
$('.info').eq(index).show().siblings('.info').hide(); // shows the corrosponding element and hides the others.
});

cssファイルで、最初の情報クラスを最初に設定したことを確認する必要があります

于 2013-01-05T07:57:16.363 に答える