定番
新着
履歴

jQuery テキストティッカーのサンプル

共通コード
以下のサンプルは共通のコードがあります。
サンプル
コード

パターン fade(フェード)

  • フェード テスト1
  • フェード テスト2
  • フェード テスト3
  • フェード テスト4
  • フェード テスト5
サンプル
コード

パターン roll(ロール)

  • ロール テスト1
  • ロール テスト2
  • ロール テスト3
  • ロール テスト4
  • ロール テスト5
サンプル
コード

パターン slide(スライド)

  • スライド テスト1
  • スライド テスト2
  • スライド テスト3
  • スライド テスト4
  • スライド テスト5
© 2024 kipure
Top



<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>