Немного позаимствовал у
рони
<style>
li { display:inline }
.active img{ border:1px solid red }
div { width:700px;
overlay:hide
}
</style>
<div>
<ol>
<li><img src="http://ingraf.su/wp-content/uploads/adecco.jpg" alt="Adecco" class="img-responsive"></li>
<li class='active'><img src="http://ingraf.su/wp-content/uploads/Rambler.jpg" alt="Rambler" class="img-responsive"></li>
<li><img src="http://ingraf.su/wp-content/uploads/bel.jpg" alt="Белая птица" class="img-responsive"></li>
<li><img src="http://ingraf.su/wp-content/uploads/Rusbiteh.jpg" alt="Русбитех" class="img-responsive"></li>
<li>
<img src="http://ingraf.su/wp-content/uploads/Tryohgornaya-manufaktura.jpg" alt="Трёхгорная мануфактура" class="img-responsive">
</li>
<li>
<img src="http://ingraf.su/wp-content/uploads/Moskabelmet.jpg" alt="Москабельмет" class="img-responsive">
</li>
<li>
<img src="http://ingraf.su/wp-content/uploads/Asteros.jpg" alt="Астерос" class="img-responsive">
</li>
<li>
<img src="http://ingraf.su/wp-content/uploads/Subaru.jpg" alt="Subaru" class="img-responsive">
</li>
<li>
<img src="http://ingraf.su/wp-content/uploads/Nestle.jpg" alt="Nestle Waters" class="img-responsive">
</li>
</ol>
</div>
<script>
document.querySelector("ol").onclick = function(e){
var lis = document.querySelectorAll('li');
var target = event.target;
if (target = target.closest("li")) {
var selected = [].indexOf.call(lis, target ) ;
if(selected != 1) {
curr = selected ? selected - 1: lis.length - 1;
var innerOl = "<li>" + lis[curr].innerHTML + "</li>\n<li class='active'>" + lis[selected].innerHTML + "</li>\n";
curr++;
for(var i = 2;i <lis.length;i++) {
curr++;
if(curr >= lis.length) { if(selected==0) curr = 1;
else curr =0;
}
innerOl += "<li>" + lis[curr].innerHTML + "</li>\n";
}
this.innerHTML = innerOl;
}
}
};
</script>
