0

左側の列とメインの製品画像の単一の列に製品のサムネイルを含める必要があるショッピング カートを作成しています。サムネイル画像の上にマウスを置くと、メイン画像がサムネイルの画像に置き換えられます。

これは、Amazon のhttp://www.amazon.com/gp/product/B0057OCDQS/ref=s9_simh_gw_p422_d0_i1?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-3&pf_rd_r=1ZQ6JXTTST3W87ZTQE26&pf_rd_t=101&pf_rd_p=4709のようになります。これを実装するにはどうすればよいですか？このためのコントロールまたは jQuery プラグインはありますか? そうでない場合、コード サンプルはどこにありますか?

jQuery、jQuery UI、ASP.NET/Mono MVC3 を使用。

アマゾン画像ホバー

アップデート

サムネイルリストは非常に大きいです。サムネイルを 3 つだけ表示し、前後のサムネールを選択できる上下のスクロール ボタンを追加する方法。何かのようなもの：

scroll one thumb up

thumbnail image 1

thumbnail image 2

thumbnail image 3

scroll one thumb up
4

3 に答える 3

1

hoverそのためのメソッドを使用できます

HTML:

<div class="thumbs">
    <img src="http://lorempixel.com/sports/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/city/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/people/200/400" width="50" height="50"/>
</div>

<div class="main-img">
    <img id="main" src="http://lorempixel.com/people/200/400"/>
</div>

CSS:

.thumbs {
    display: inline-block;
    vertical-align: top;
}

.thumbs img {
    display: block;
}

.main-img {
    display: inline-block;
}

JQuery:

$('.thumbs img').hover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
});

JSFiddle

于 2013-05-17T16:30:07.720 に答える
0

Jquery onClick を使用して div の html を変更することはできませんか?

于 2013-05-17T16:09:05.887 に答える