Newsticker manuell steuern

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

<style type="text/css">
#myNewsticker .newsTicker{display: none;width:400px;text-align: left;}
#myNewsticker .newsTicker.active{display: block;}
div#myNewsticker{padding: 10px 25px; background: #eee; color: rgb(82,29,13); font-weight: bold; font-family: calibri; display: inline-block;}
span#next, span#prev{cursor: pointer; padding: 5px; color: black; font-size: 50px; text-align: left; width: 35px; height: 40px; line-height: 20%; box-sizing: border-box;}
</style>
</head>

<body>
<span id="prev">»</span>
<div id="myNewsticker">
<div class="newsTicker active">Htmlknowhow möchte Ihnen keine Lehrstunde</div>
<div class="newsTicker">in html, css oder Java geben,</div>
<div class="newsTicker">sondern ganz praktische Tipps,</div>
<div class="newsTicker"> wie Sie ihre Homepage optisch und</div>
<div class="newsTicker">inhaltlich verbessern können.</div>
<div class="newsTicker">Ich gebe Homepage-Designern Tipps,</div>
<div class="newsTicker">wie sie ihren Webauftritt verbessern können.</div>
</div>
<span id="next">«</span>
<script>
$(function(){
$('#next').click(function(){
var activeDiv = $('div.active');
activeDiv.removeClass('active');
if(activeDiv.next().length == 0){
$('div.newsTicker').eq(0).addClass('active').css('opacity', 0).animate({
opacity: 1
},300);
}else{
activeDiv.next().addClass('active').css('opacity', 0).animate({
opacity: 1
},300);
}
});

$('#prev').click(function(){
var activeDiv = $('div.active');
activeDiv.removeClass('active');
if(activeDiv.prev().length == 0){
$('div.newsTicker').eq(-1).addClass('active').css('opacity', 0).animate({
opacity: 1
},300);
}else{
activeDiv.prev().addClass('active').css('opacity', 0).animate({
opacity: 1
},300);
}
});
});
</script>
</body>

</html>

html knowhow

Newsticker manuell steuern

Newsticker manuell steuern