Leaflet

HTML/Javascript ガジェット

• 
  チャン・ナラ
  (39歳)
  1981年
  160cm
  運命のように
  君を愛す
• 
  パク・シネ
  (30歳)
  1981年
  168cm
  となりの美男
  ピノキオ
• 
  ハン・ジミン
  (37歳)
  1982年11月5日
  身長：160cm
  屋根部屋のプリンス

Grid & Flex

ソン・ジヒョ

(39歳)

ハン・ヒョジュ

(33歳)

ハ・ジウォン

(42歳)

キム・ユジョン

(20歳)

ナム・ジヒョン

(24歳)

ハン・イェリ

(35歳)

パク・シネ

(30歳)

ハン・ジミン

(37歳)

チャン・ナラ

(39歳)

• 
• 
• 
• 
• 
• 
• 

Glyph

jQuery Cycle

Banner Cycle

Script/Style/HTML

<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     : 'scrollDown', // 上から下へ
    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>