0

私はいくつかのliを持っており、それぞれに画像が含まれています。最初の 3 つは表示され、残りは非表示になります。私がやりたいのは、表示されている画像の1つ（ランダムなもの-そのビットは機能します..）を非表示にし、画像を非表示の画像の1つに置き換えて再度表示することですが、再び表示できないようです. コードペンは次のとおりです。http://codepen.io/anon/pen/sBvkC

HTML:

<ul>
  <li class="imageIn"><img src="http://placehold.it/300x200" /></li>
  <li class="imageIn"><img src="http://placehold.it/300x200" /></li>
  <li class="imageIn"><img src="http://placehold.it/300x200" /></li>
  <li class="imageOut"><img src="http://placehold.it/300x200" /></li>
  <li class="imageOut"><img src="http://placehold.it/300x200" /></li>
</ul>

CSS:

* { margin: 0; padding: 0; }    
ul { list-style-type: none; width: 100%; }
li { width: 33%; display: inline-block; }   
img { width: 100%; }    
.imageOut { display: none; }   
.hidden { visibility: hidden; }    
.visible { visibility: visible; }

JS:

window.setInterval(function(){swapImage()},1000);

function swapImage() {

  /* select random image that is currently displayed */
 ins = $('.imageIn > img');
 var imageDisplayed = $(ins[Math.floor(Math.random()*ins.length)]);

  /* select random image that is NOT currently displayed */
  outs = $('.imageOut > img');   
  var imageNotDisplayed = $(outs[Math.floor(Math.random()*outs.length)]);

  /* switch displayed image to visibility:hidden */
  $(imageDisplayed).css("visibility", "hidden");

  /* SWAP src of imageDisplayed with that of imageNotDisplayed */
  var srcDisplayed = $(imageDisplayed).attr("src");
  var srcNotDisplayed = $(imageNotDisplayed).attr("src");
  $(imageDisplayed).attr("src") = srcNotDisplayed;
  $(imageNotDisplayed).attr("src") = srcDisplayed;

  /* switch to visibility:visible */
  $(imageDisplayed).css("visibility", "visible");

}

私は何を間違っていますか？

4

1 に答える 1

4

img タグの src 属性を正しく設定していません。変化する：

$(imageDisplayed).attr("src") = srcNotDisplayed;
$(imageNotDisplayed).attr("src") = srcDisplayed;

の中へ：

$(imageDisplayed).attr("src", srcNotDisplayed);
$(imageNotDisplayed).attr("src", srcDisplayed);
于 2013-10-04T15:28:05.907 に答える