List logo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="list-items"></div>

SCSS

.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;
	}
}

JavaScript

// List //
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 < 8; ++i) {
    $(".list-items").append('<a href="" class="item"><img src="" alt=""></a>');
}

// 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 tag //
$('.item img').each(function(i) {
    $(this).attr('src', logos[i]);
});

// Change image //
count = 0;
  setInterval(function () {
    count++;
    $(".item img").fadeOut(600, function () {
      $(this).attr('src', logos[count % logos.length]).fadeIn(600);
    });
 }, 5000);