0

独自に作成した画像ビューアのオーバーレイに、次の html コードがあります。

<div class="carousel slide" id="imgViewer">
        <div class="carousel-inner">
            <div id="item1" class="item active">
                <div id="pic1">
                    <center>
                          <img style="height: 100%;" src="./upload/offers/6/img.jpg" alt="">
                    </center>
                 </div>
            </div>
            <div id="item2" class="item ">
               <div id="pic2">
                 <center>
                   <img style="height: 100%;" src="./upload/offers/6/img2.jpg" alt="">
                 </center>
                </div>
            </div>
</div>
</div>

これがメイン ビューです (左側のスライダー)。

右側には、スライダーで表示できるすべての画像の別のビューがあります。これは私の最後の試みの1つです...

<a href="#item1" data-toggle="carousel-toggle" data-slide=""><img style="vertical-align: middle;" src="./upload/offers/6/img.jpg" alt="" /></a>

問題: このようには動作しません...スライダーでクリックした画像にジャンプしたいのですが...どうすればこれを実現できますか?

4

2 に答える 2

2

画像に onClick イベントを追加できます。そのイベントは、表示したい画像の div でクラスをアクティブに変更する可能性があります。

<div id="item1" class="item active">

クラス「アクティブ」は、表示されているスライドです。

于 2013-06-03T09:06:46.653 に答える
1 
$('#item1').click(function() {
                $('#item1, #item2, #item3, #item4, #item5, #item6, #item7').removeClass('active');
                $('#item1').addClass('active');
                return true;
            });

大丈夫、データ切り替えカルーセルのようなブートストラップでできると思った...

data-slide-to

これは、それを探しているすべての人のためにそれを行います...

于 2013-06-03T09:09:52.193 に答える