JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bildlauf">
<ul class="slide" style="margin-top: -9.592000251770019px;">
<li>
<img src="http://www.johnen.de/images/teaser_links/koelner_zoo.jpg">
</li>
<li>
<img src="http://www.johnen.de/images/teaser_links/apassionata.jpg">
</li><li>
<img src="http://www.johnen.de/images/teaser_links/nightoftheproms.jpg">
</li><li>
<img src="http://www.johnen.de/images/teaser_links/fortuna_koeln.jpg">
</li><li>
<img src="http://www.johnen.de/images/teaser_links/koelner_haie.jpg">
</li>
</ul>
</div>
CSS
* {margin:0; padding:0; }
#bildlauf { width: 120px; height: 800px; overflow: hidden; }
#bildlauf ul { overflow: hidden; }
#bildlauf ul li{ line-height: 10px; }
JavaScript
$(function () {
var bildlauf = $('#bildlauf'),
slide = bildlauf.find('.slide'),
h = slide.find('li:first').height(),
first = true,
speed = 1000/20;
var lauf = function() {
var margin = parseInt(slide.css('marginTop'), 10),
h = slide.find('li:first').height();
if(margin < -10 && first){
first = false;
slide.append(slide.find('li:first').clone());
}else if(margin <= -h){
first = true;
slide
.css({marginTop: 0})
.find('li:first').remove();
}
slide.stop().animate({marginTop: "-="+h+"px"}, speed*h, 'linear');
}
var id = setInterval(lauf, 100);
$(window).focus(function () {
clearInterval(id);
}).blur(function () {
clearInterval(id);
});
slide.hover(
function () {
clearInterval(id);
slide.stop();
},
function () {
id = setInterval(lauf, 100);
});
})