6/13/2021

jQuery cycle

jQueryスクリプトcycleを使ったバナー表示の例を示す。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script>$('#cycle').cycle({
  fx     : 'scrollLeft', // 右から左へ
  speed  : 100,  // 切り替え速度0.1秒
  timeout: 2000  // 切り替え待機時間2秒
});
</script>
<style>
#banner {
  position:relative;height:0;
  padding-bottom: 56.25%;
  }
#banner #cycle {
  position: absolute;
  top: 0; left: 0; border: 0;
  width: 100%;  height: 100%;
  }
</style>
<div id="banner">
  <div id="cycle">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
  </div>
</div>
  • バナーの高さは #cycle スタイルで直接(px)または縦横比(%)を指定
    〔例〕HDサイズのとき padding:56.25%　縦横比が1:4のとき:25%;
  • 同じ ID 名ではページ内で一つしか使えない。
    CLASS の場合は複数個所で使える。
  • cycleプラグインはMicrosoft Ajax Content Delivery Networkを利用
ラベル：