One small example of list of images in one line, with endless animating, where middle image will be shown as "selected".
Html part is simple we need only one line of code:
<div id="imagesTrack"></div>
CSS:
#imagesTrack { width: 100%; overflow: hidden; white-space: nowrap; }
Javascript:
/*global jQuery, document, setInterval*/ (function () { "use strict"; jQuery.getJSON("files.json", function (data) { data.forEach(function (file) { jQuery("#imagesTrack").append('<img src="' + file + '">'); }); setInterval(function () { jQuery("#imagesTrack").append('<img src="' + jQuery("img")[0].src + '">'); jQuery("img").eq(0).remove(); jQuery("img").eq(2).css("border", "14px solid #333"); jQuery("img").eq(1).css("border", ""); }, 500); }); }());
Interesting thing to notice here is eq, which will give us jQuery object of one item in the array (or list, whatever) of images.
Live example: