0

見てくれてありがとう、私はこの計画を持っています.8つのサムネイルの束の上にマウスを置くことで簡単に変更されるメイン画像を持つギャラリーを作成したいと思います.

私が追加したいのは、3 つのサムネイルの個別の小さな束です。これらにマウスを合わせると、8 つのサムネイル画像が変更され、8 つの新しいメイン画像が呼び出されます。申し訳ありませんが、それが理解できることを願っていますか？

つまり、新しい 3 つのサムが 8 つのサムの異なるライブラリを保持する小さなフォルダー ツリーのように、階層化またはネストされた配置に少し似ています…いや、それはおそらくそれをさらに混乱させているだけです!!!..

親指の上にマウスを置くことですべてが完了したので、スムーズで、ページをクリックしたりリロードしたりする必要がありませんでした.

私は周りをよく見ましたが、検索エンジンにどの用語/フレーズ/コマンドを表示するかを伝える必要があるだけかもしれません.

3 つの親指を取得して 8 つの親指を変更すると、メインの画像は十分に簡単になるはずです。現在これを使用しています。

<img src = "images/nicepic5thumb.png"  onmouseover =”document.main.src = 'images/nicepic5.jpg';">

メインの大きな画像は次のとおりです。

<img src = "images/nicepic1.jpg" name= "main">

そして、複数の画像に拡張できると思います。ただし、このようにする必要はありませんが、最善の方法は何でも、現在私を超えている複数のマウスオーバーコマンドを1つのマウスオーバーで変更することです.

最終的には、すべてのトランジションをフェードさせることを目指しています。

正しい方向へのポインタに非常に感謝しています。

4

2 に答える 2

0

これは、実際にはjQueryで非常に簡単に実行できるものです

ギャラリー内の画像に共通のクラスを追加するか、より効率的に画像を含む要素に ID を追加し、それを使用して などの画像を選択するだけです。

<img src = "images/nicepic1.jpg" name= "main" id="main_img">
<div id="gallery"><img src="nicepic1thumb.png"><img src="nicepic2thumb.png"><img src="nicepic3thumb.png"></div>
<script>
  $(document).ready(function(){
    $("#gallery img").onmouseover(function(){
      $("#main_img").attr('src',$(this).attr('src').replace("thumb.png",".jpg"));
    }
  }
</script>

これは、まさにあなたが望んでいたことを行う、アニメーションのない完全に機能するギャラリーです.

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript" ></script>
    <script>
        $(document).ready(function(){
            gallery.init();
        });
        var gallery = {
            main_img: null,
            init:function(){
                gallery.main_img = $("#main_img img");
                $("#images img").click(function(){
                    gallery.change($(this).attr('src'));
                });
            },
            change: function(image){
                gallery.main_img.attr('src', image.replace("thumb.png",".jpg"));
            }
        }
    </script>
</head>
<body>
    <div id="gallery">
    <div id="main_img"><img src="images/image1.jpg"/></div>

    <div id="images">     
        <img src="images/image1thumb.png"/><img src="images/image2thumb.png"/><img src="images/image3thumb.png"/><img src="images/image4thumb.png"/><img src="images/image5thumb.png"/>
    </div>
    </div>
<body>
</html>

フェードなどのアニメーションが必要な場合は、お問い合わせください。

于 2012-05-16T12:26:28.853 に答える
0

メイン画像を変更し、3 つの人差し指で 8 つの画像パネルの可視性を切り替えさせるそれぞれのコマンドを使用して、8 つの親指の 3 つのパネル (またはそれ以上) を送信します。

于 2012-05-16T12:24:50.463 に答える