ソース

javascript

$(function(){
  $.simpleTicker($("#ticker-fade"),{'effectType':'fade'});
  $.simpleTicker($("#ticker-roll"),{'effectType':'roll'});
  $.simpleTicker($("#ticker-slide"),{'effectType':'slide'});
});

HTML

<h4 class="index">パターン fade</h4>
<div id="ticker-fade" class="ticker">
<ul>
<li>パターン１　テスト１</li>
<li>パターン１　テスト２</li>
<li>パターン１　テスト３</li>
<li>パターン１　テスト４</li>
<li>パターン１　テスト５</li>
</ul>
</div>

<h4 class="index">パターン roll</h4>
<div id="ticker-roll" class="ticker">
<ul>
<li>パターン２　テスト１</li>
<li>パターン２　テスト２</li>
<li>パターン２　テスト３</li>
<li>パターン２　テスト４</li>
<li>パターン２　テスト５</li>
</ul>
</div>

<h4 class="index">パターン slide</h4>
<div id="ticker-slide" class="ticker">
<ul>
<li>パターン２　テスト１</li>
<li>パターン２　テスト２</li>
<li>パターン２　テスト３</li>
<li>パターン２　テスト４</li>
<li>パターン２　テスト５</li>
</ul>
</div>

CSS

.sample-ticker {
  margin: 0 auto;
  padding: 10px;
  width: 600px;
  text-align: left;
  border: #ccc 1px solid;
  position: relative;
  overflow: hidden;
  background-color:#ffffff;
}

.sample-ticker ul {
  width: 100%;
  position: relative;
}

.sample-ticker ul li {
  width: 100%;
  display: none;
}

参考にしたサイトなど

• jquery.simpleTicker.js - github

ソースの説明など

• 簡単なjquery tickerプラグインを作ってみた。 - ミラボ