title: Change one random image in a list
body: <p>I would like to create a client's logo wall like this : <a href="https://www.squarespace.com/" rel="nofollow noreferrer">https://www.squarespace.com/</a> scroll down until "TRUSTED BY THE WORLD’S BEST" section.</p>
  
  <p>To create the same effect, I begin to generate a list of 8 elements and after I put random src image from an array inside my list : <a href="https://jsfiddle.net/Xroad/avn64tw0/6/" rel="nofollow noreferrer">https://jsfiddle.net/Xroad/avn64tw0/6/</a></p>
  
  <p>After that, I tried to change randomly ONLY ONE image after the other :
  <a href="https://jsfiddle.net/Xroad/avn64tw0/8/" rel="nofollow noreferrer">https://jsfiddle.net/Xroad/avn64tw0/8/</a></p>
  
  <p>I don't know how to change only one random image ? And after add the little move effect to from the bottom to the top.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="list-items"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.list-items {
      max-width: 500px;
  }
  
  .item {
      display: inline-block;
      float: left;
      margin: 10px;
      height: 100px;
      width: 100px;
      line-height: 100px;
      background-repeat: no-repeat;
      background-size: cover;
  
      img {
          display: inline-block;
          width: 100%;
          height: auto;
          max-height: 100%;
          vertical-align: middle;
      }
  }
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>// List of images //
  var logos = ["http://wallpaper-gallery.net/images/image/image-1.jpg", "http://wallpaper-gallery.net/images/image/image-2.jpg", "http://wallpaper-gallery.net/images/image/image-3.jpg", "http://wallpaper-gallery.net/images/image/image-4.jpg", "http://wallpaper-gallery.net/images/image/image-5.jpg", "http://wallpaper-gallery.net/images/image/image-6.jpg", "http://wallpaper-gallery.net/images/image/image-7.jpg", "http://wallpaper-gallery.net/images/image/image-8.jpg"];
  
  // Generate 8 items //
  var i;
  for (i = 0; i &lt; 8; ++i) {
      $(".list-items").append('&lt;a href="" class="item"&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;');
  }
  
  // Shuffle function //
  function shuffle(o) {
      for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
  };
  
  logos = shuffle(logos);
  
  // Push src in image tags //
  $('.item img').each(function(i) {
      $(this).attr('src', logos[i]);
  });
  
  // Change one image after the other //
  count = 0;
    setInterval(function () {
      count++;
      $(".item img").fadeOut(600, function () {
        $(this).attr('src', logos[count % logos.length]).fadeIn(600);
      });
   }, 5000);
  </code></pre>
  
  <p>The "Change image" part don't work like I would like, it change all the image while I would like one image after the other.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>With help of @ChrisG I got an image who change randomly, but sometimes I got duplicate image.</p>
  
  <p><a href="https://jsfiddle.net/Xroad/avn64tw0/11/" rel="nofollow noreferrer">https://jsfiddle.net/Xroad/avn64tw0/11/</a></p>