Newsticker scrollt automatisch mit Pause

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>

<style type="text/css">
*{margin:0; padding:0}
ul, li, ol, dl, dt, dd {list-style:none}
.news-list { *zoom:1;margin-left:20%;}
.news-list:after {content:'';display: block; clear: both; height: 0; visibility: hidden; }
.news-list .list-area {width:500px; height: 27px; overflow:hidden; background-color:silver; border: 1px solid green; padding: 2px 2px 0px; float:left;}
.news-list .list-area > ul {position:relative;}
.news-list .subject {display:inline-block; font-size:20px; text-overflow:ellipsis; word-wrap:normal; white-space:nowrap; overflow:hidden; width: 400px; vertical-align: middle; text-align: left;}
.news-list li {padding: 0 0 6px;}
.news-list .subject a {text-decoration: none; color: inherit;}
.news-list .stop, .news-list .play {display: block; width:20px; width:100px; height: 20px; overflow: hidden; line-height: 9999px; float: left;}
.news-list .stop {background: url('Deine image-url für Stop') no-repeat center center;}
.news-list .play {background: url('Deine image-url für Play') no-repeat center center;}

</style>
</head>

<body>
<div class="news-list list1">
<a href="javascript:;" class="play">play</a>

<div class="list-area">
<ul>
<li><span class="subject"><a href="javascript:;">Htmlknowhow möchte Ihnen keine Lehrstunde in...</a></span></li>
<li><span class="subject"><a href="javascript:;">html, css oder Java geben,...</a></span></li>
<li><span class="subject"><a href="javascript:;">sondern ganz praktische Tipps, ...</a></span></li>
<li><span class="subject"><a href="javascript:;">wie Sie ihre Homepage optisch und ...</a></span></li>
<li><span class="subject"><a href="javascript:;">inhaltlich verbessern können.</a></span></li>
<li><span class="subject"><a href="javascript:;">Html, CSS und Java bieten da super Möglichkeiten.</a></span></li>
</ul>
</div>
<a href="javascript:;" class="stop">stop</a>
</div>

<script>
;(function(){
$.fn.newsticker = function(options){
var _default, opts;
_default = {
delay: 2000,
speed: 300
};
opts = $.extend({}, _default, options);
this.each(function(idx){
var that = $(this),
$ul = that.find(' .list-area > ul'),
$li = $ul.find('li'),
li_height = $li.outerHeight(true),
lth = $li.length;
function play() {
timer = setInterval( function(){
$ul.stop(true).animate(
{ top:'-='+li_height },
opts.speed,
function(){
var li = $(this).find('li');
li.eq(0).insertAfter( li.eq(lth - 2) );
$(this).css( 'top', 0 );
}
);
}, opts.delay );

that.removeClass('stop').addClass('play');
}
function stop() {
console.log(that);
if (that.hasClass('play')) {
console.log('Pause');
clearInterval(timer);
that.removeClass('play');
that.addClass('stop');
}
}
that.find('a.play').on('click', function(){
if ( that.hasClass('stop') ) play();
});
that.find('a.stop').on('click', stop);
play();
});
};
})();
$('.news-list').newsticker({
delay: 1000,
});
</script>
</body>

</html>

html knowhow

Newsticker scrollt automatisch mit Pause

Newsticker scrollt automatisch mit Pause