如何随机显示ul li中的图像

时间:2015-12-17 08:39:08

标签: javascript jquery

我有多个图像的ul li部分,我想第一次显示8张图像,然后想要从所有图像中显示图像。这是我的ul li结构。

<ul id="randon-client">

<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand9"></li>                 
</ul> 

1 个答案:

答案 0 :(得分:1)

尝试此代码,每3个secons随机显示

$( document ).ready(function() {
showRamdon()  
});

function showRamdon(){
      setTimeout(function() {

   $images   = $("#randon-client").find('img');
  total = $images.length;

  random = Math.floor(total  * Math.random()) + 1;
  $images.hide();
  $images.eq(random).show();
  showRamdon();
},1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul id="randon-client">

<li><img src="#" alt="brand1"></li> 
<li><img src="#" alt="brand2"></li> 
<li><img src="#" alt="brand3"></li> 
<li><img src="#" alt="brand4"></li> 
<li><img src="#" alt="brand5"></li> 
<li><img src="#" alt="brand6"></li> 
<li><img src="#" alt="brand7"></li> 
<li><img src="#" alt="brand8"></li> 
<li><img src="#" alt="brand9"></li> 
<li><img src="#" alt="brand10"></li> 
<li><img src="#" alt="brand11"></li> 
<li><img src="#" alt="brand12"></li> 
<li><img src="#" alt="brand13"></li> 
<li><img src="#" alt="brand14"></li> 
<li><img src="#" alt="brand15"></li>               
</ul>