色々なウェブページを見ていると、たまに見かけるふわっとトップのメイン画像が自動で遷移する方法についてメモ。

まず、ヘッダに下記、javascriptを記述。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
<script type="text/javascript">
function slideSwitch() {
   var $active = $('#top_img img.active');

   if ( $active.length == 0 ) $active = $('#top_img img:last');

   var $next =  $active.next().length ? $active.next()
      : $('#top_img img:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 2000, function() {
           $active.removeClass('active last-active');
      });
}

$(function() {
   setInterval( "slideSwitch()", 5500 );
});
</script>

ここで、2000と数字があるところは、遷移に要する時間で、単位はミリ秒。
また5500と数字があるところは、次の遷移までのタイミングで、同じく単位はミリ秒。

つづいて、Html。

<div id="top_img">
   <img class="active" src="swfu/d/top_left_img01.png" alt="" width="665" height="470">
   <img src="swfu/d/top_left_img02.png" alt="" width="665" height="470">
   <img src="swfu/d/top_left_img03.png" alt="" width="665" height="470">
</div>

これに対するCSSは次のようにするればよい。

#left_img{
float: left;
width: 670px;
height: 470px;
position: relative;
}
#left_img img{
margin: 0px;
padding: 0px;
position:absolute;
top:0px;
left:0px;
z-index: 8;
opacity: 0.0;
}
#left_img img.active{
z-index: 10;
opacity: 1.0;
}
#left_img img.last-active{
z-index: 9;
}

ここで、z-indexは、互いのレイヤーの順番を表しており、数字が大きいほど上のレイヤーにいることを意味する。