0

私はJavascriptフォトギャラリーに取り組んでいますが、非常にユーザーフレンドリーにしたいと思っています。これには、画像ごとに1つの画像と1つのリンクを使用するだけで済みます。私はそれを持っているので、すべての画像が左側のスクロールdivに表示され、onClickは右側の画像ソースを変更することを想定していますが、元の画像から画像ソースを取得して2番目の画像を変更するjavascriptを取得できないようですそれと1つ。私は他のいくつかの方法を試しましたが、これは私が好きな方法であり、それを機能させることができれば完璧です。

これはテーブル内にあるので、配置が異なります。必要なコードを指定するだけです。

このコードは以下のとおりですが、彼は答えを削除したようです。あなたは私よりずっと近かったと思います！

Javascript：

<script type="Text/javscript">

function setImage(this) {
    document.getElementById("ImageFrame").src = this.childNodes[0].src;
}

</script>

壊す

    <div style="width:275;height:400;overflow-x:scroll;">

     <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0421.jpg" /></a>

     <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0422.jpg" /></a>

     <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0423.jpg" /></a>

</div>

変更される画像。

    <div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
4

5 に答える 5

1

私はこのような何かがあなたのために働くはずだと信じています：

HTML：

<a href="#" onclick="setImage(this);"><img class="gallery" id="image1" src="image1.jpg" /></a>

Javascript：

function setImage(imgParent) {
    document.getElementById("ImageFrame").src = imgParent.childNodes[0].src;
}​

ライブデモ

実際に画像を読み込むと、デモの動作が向上します。ただし、壊れた画像を調べると、新しい画像に正しく読み込まれていることがわかります。

編集：

KafがchildNodesに問題があると述べたので、代わりにこれを試してみることをお勧めします。

Javascript：

function setImage(imgParent) {
    document.getElementById("ImageFrame").src = imgParent.getElementsByTagName('img')[0].src;
}​
于 2012-05-15T12:48:02.270 に答える
1 
var pic1 = document.getElementById("image1"); 
var src = pic1.src;  // here is the src for image1

var pic2 = document.getElementById("image2"); 
pic1.src = src;  // here we set the src for image2

したがって、このコードはsrcimage1から画像を取得し、それをimage2に配置します。

于 2012-05-15T12:42:50.537 に答える
1

これが実際の例です。NOTE: a.getElementsByTagName('img')[0].src異なるブラウザが子タグの前後にタグにノードを追加するためです。It is safe to use getElementsByTagName('img')[0].src

<html>
    <head>
    <script type="text/javascript">
    function setImg(a){
          //alert(a.getElementsByTagName('img')[0].src);
              document.getElementById('ImageFrame').src = 
                          a.getElementsByTagName('img')[0].src
            }
        </script>
    </head>
    <body>
    <a href="#" onclick="setImg(this);"><img src="JCF/PICT0421.jpg"></a>

        <div>
           <img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
        </div>
    </body>
</html>
于 2012-05-15T13:01:24.370 に答える
0

Jqueryを使用できると仮定します

$('.imageClass').click(function(){
    var srcToCopy = $(this).attr('src');
    $(somewheretoputsrc).attr('src', srcToCopy);
})

このコードは機能するはずです

編集：作業画像で編集されたフィドル http://jsfiddle.net/jbduzan/b7adx/1/

于 2012-05-15T13:10:26.503 に答える
0

いわゆる「控えめなJavaScript」を使用する必要があります。つまり、コンテンツをJavaScriptと混在させたり、ウィンドウが読み込まれた後に目的の動作を適用したりしないでください。そんな感じ：

function addDomListener(element, eventName, listener) {
  if (element.addEventListener) // most browsers
    element.addEventListener(eventName, listener, true);
  else if (element.attachEvent) // IE
    element.attachEvent('on' + eventName, listener);
}
window.onload = function() {
  var elements = getElementsByClassName('thumb-link');
  for (int i=0; i < elements.size(); i++) {
    var el = elements[i];
    addDomListener(el, "click", function () {
      setImage(el);
    });
  }
}

getElementsByClassNameにはまだここでの実装が必要であり、以前にonlickを持っていたすべてのタグにはクラス'thumb-link'が必要です。しかし、あなたはそれを理解すると確信しています。

jQueryやPrototype.jsのようなライブラリを使用すると、ここで簡単になります...

于 2012-05-15T13:42:49.877 に答える