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>