<script>
$(function(){
$.simpleTicker($("#ticker-fade"),{'effectType':'fade'});
});
</script>
<h4 class="index">パターン fade(フェード)</h4>
<div id="ticker-fade" class="ticker">
<ul>
<li>フェード テスト1</li>
<li>フェード テスト2</li>
<li>フェード テスト3</li>
<li>フェード テスト4</li>
<li>フェード テスト5</li>
</ul>
</div>
<script>
$(function(){
$.simpleTicker($("#ticker-roll"),{'effectType':'roll'});
});
</script>
<h4 class="index">パターン roll(ロール)</h4>
<div id="ticker-roll" class="ticker">
<ul>
<li>ロール テスト1</li>
<li>ロール テスト2</li>
<li>ロール テスト3</li>
<li>ロール テスト4</li>
<li>ロール テスト5</li>
</ul>
</div>
<script>
$(function(){
$.simpleTicker($("#ticker-slide"),{'effectType':'slide'});
});
</script>
<h4 class="index">パターン slide(スライド)</h4>
<div id="ticker-slide" class="ticker">
<ul>
<li>スライド テスト1</li>
<li>スライド テスト2</li>
<li>スライド テスト3</li>
<li>スライド テスト4</li>
<li>スライド テスト5</li>
</ul>
</div>
<style>
.ticker {
margin: 10px auto;
padding: 3%;
width: 94%;
text-align: left;
border: #ccc 1px solid;
position: relative;
overflow: hidden;
background-color:#ffffff;
}
.ticker ul {
width: 100%;
position: relative;
}
.ticker ul li {
width: 100%;
display: none;
}
</style>
<script src="/js/jquery/plugins/simpleTicker/jquery.simpleTicker.js"></script>