尝试将随机图像与其他随机图像交换

trying to swap random image with other random image

本文关键字：图像 随机 其他 交换      更新时间：2023-09-26

我有一些li，每个里面都有一个图像。前三个是可见的，其余的是隐藏的。我想做的是隐藏其中一个可见图像（随机图像 - 该位有效..），将图像替换为隐藏图像之一并再次显示，但我似乎无法再次显示它。这是代码笔： 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");
}

我做错了什么？

您没有正确设置 img 标记上的 src 属性。改变：

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

到：

$(imageDisplayed).attr("src", srcNotDisplayed);
$(imageNotDisplayed).attr("src", srcDisplayed);
相关文章：