Back and forth

By simply setting the option circular to false, this news ticker will go back and forth.

PauseOnHover

Because the option pauseOnHover is set to "immediate", these news tickers will immediately stop scrolling if you move your mouse over them.

Any kind of HTML

These news tickers may contain any kind of HTML, such as hyperlinks, formatted text or even images.

HTML

		<div id="wrapper">
			<h3>News Tickers</h3>
			<div class="first">
				<dl id="ticker-1">
					<dt>News ticker</dt>
						<dd>A news ticker (sometimes referred to as a &quot;crawler&quot;) resides in the lower third of the television screen space on television news networks dedicated to presenting headlines or minor pieces of news.</dd>
	
					<dt>Scoreboard style</dt>
						<dd>It may also refer to a long, thin scoreboard-style display seen around the front of some offices or public buildings.</dd>
	
					<dt>WWW</dt>
						<dd>Since the growth in usage of the World Wide Web, news tickers have largely syndicated news posts from the websites of the broadcasting services which produce the broadcasts.</dd>
				</dl>
			</div>
			<div>
				<dl id="ticker-2">
					<dt>Back and forth</dt>
						<dd>By simply setting the option <code>circular</code> to <code>false</code>, this news ticker will go back and forth.</dd>

					<dt>PauseOnHover</dt>
						<dd>Because the option <code>pauseOnHover</code> is set to <code>&quot;immediate&quot;</code>, these news tickers will immediately stop scrolling if you move your mouse over them.</dd>
	
					<dt>Any kind of HTML</dt>
						<dd>These news tickers may contain any kind of HTML, such as <a href="#">hyperlinks</a>, <em>formatted</em> <strong>text</strong> or even images.</dd>
				</dl>
			</div>
		</div>
	

JavaScript

			$(function() {
				$('#ticker-1').carouFredSel({
					width: 1000,
					align: false,
					items: {
						width: 'variable',
						height: 35,
						visible: 1
					},
					scroll: {
						delay: 1000,
						easing: 'linear',
						items: 1,
						duration: 0.07,
						pauseDuration: 0,
						pauseOnHover: 'immediate'
					}
				});

				$('#ticker-2').carouFredSel({
					width: 1000,
					align: false,
					circular: false,
					items: {
						width: 'variable',
						height: 35,
						visible: 2
					},
					scroll: {
						delay: 1000,
						easing: 'linear',
						items: 1,
						duration: 0.07,
						pauseDuration: 0,
						pauseOnHover: 'immediate'
					}
				});

				//	set carousels to be 100% wide
				$('.caroufredsel_wrapper').css('width', '100%');

				//	set a large width on the last DD so the ticker won't show the first item at the end
				$('#ticker-2 dd:last').width(2000);
			});
		

CSS

			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				min-height: 600px;
				min-width: 990px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper {
				width: 100%;
				margin: -100px 0 0 0;
				position: absolute;
				left: 0;
				top: 50%;
			}
			#wrapper h3 {
				font-size: 20px;
				text-align: center;
			}
			
			#wrapper > div {
				background-color: #eee;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				width: 100%;
				height: 30px;
				padding: 15px 0;
				overflow: hidden;
			}
			#wrapper > div.first {
				border-bottom: none;
			}
			
			#wrapper dl {
				display: block;
				margin: 0;
			}
			#wrapper dt, #wrapper dd {
				display: block;
				float: left;
				margin: 0 10px;
				padding: 5px 10px;
			}
			#wrapper dt {
				background-color: #f66;
				color: #fff;
			}
			#wrapper dd {
				color: #333;
				margin-right: 50px;
			}

			code {
				font-style: italic;
			}