デモ

パターン fade

  • パターン1 テスト1
  • パターン1 テスト2
  • パターン1 テスト3
  • パターン1 テスト4
  • パターン1 テスト5

パターン roll

  • パターン2 テスト1
  • パターン2 テスト2
  • パターン2 テスト3
  • パターン2 テスト4
  • パターン2 テスト5

パターン slide

  • パターン2 テスト1
  • パターン2 テスト2
  • パターン2 テスト3
  • パターン2 テスト4
  • パターン2 テスト5

ソース

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>パターン1 テスト1</li>
<li>パターン1 テスト2</li>
<li>パターン1 テスト3</li>
<li>パターン1 テスト4</li>
<li>パターン1 テスト5</li>
</ul>
</div>

<h4 class="index">パターン roll</h4>
<div id="ticker-roll" class="ticker">
<ul>
<li>パターン2 テスト1</li>
<li>パターン2 テスト2</li>
<li>パターン2 テスト3</li>
<li>パターン2 テスト4</li>
<li>パターン2 テスト5</li>
</ul>
</div>

<h4 class="index">パターン slide</h4>
<div id="ticker-slide" class="ticker">
<ul>
<li>パターン2 テスト1</li>
<li>パターン2 テスト2</li>
<li>パターン2 テスト3</li>
<li>パターン2 テスト4</li>
<li>パターン2 テスト5</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
  • ニュースティッカー
  • ticker