デモ
パターン 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;
}