If we want to display any news in our websites, news ticker is the best visible solution for this. In this tutorial we will learn how to create the simple scrolling news ticker.

The news ticker is controlled by CSS and JavaScript. Here I have attached the CSS and the JavaScript file for download and they are ready to implement.

The main task is to create the news container and for this you can put the following code in your page inside the body tag.
First include news.css file and news.js file inside the head section of your page. You can download these two files from the download link at the end of this post.

<div id="tickerContainer"></div>

    <dl id="ticker">
      <dt class="heading">This is a news title!</dt>
      <dd class="text">This is a snippet of the news. It could be the whole news item or it could link to another page containing...</dd>
      <dt class="heading">News Heading 2</dt>
      <dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
      <dt class="heading">News Heading 3</dt>
      <dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
      <dt class="heading">News Heading 4</dt>
      <dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
      <dt class="heading">This item is long!</dt>
      <dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    </dl>

    <script type="text/javascript">
	  $(function() {

		//cache the ticker
		var ticker = $("#ticker");

		//wrap dt:dd pairs in divs
		ticker.children().filter("dt").each(function() {

		  var dt = $(this),
		    container = $("<div>");

		  dt.next().appendTo(container);
		  dt.prependTo(container);

		  container.appendTo(ticker);
		});

		//hide the scrollbar
		ticker.css("overflow", "hidden");

		//animator function
		function animator(currentItem) {

		  //work out new anim duration
		  var distance = currentItem.height();
			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

		  //animate the first child of the ticker
		  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

			//move current item to the bottom
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

			//recurse
			animator(currentItem.parent().children(":first"));
		  });
		};

		//start the ticker
		animator(ticker.children(":first"));

		//set mouseenter
		ticker.mouseenter(function() {

		  //stop current animation
		  ticker.children().stop();

		});

		//set mouseleave
		ticker.mouseleave(function() {

          //resume animation
		  animator(ticker.children(":first"));

		});
	  });
    </script>

You can download the News Ticker script from here which includes the CSS and JavaScript files also. Click here to download Simple News Ticker.