jQueryでスライドしながらフェードインで画像切り替え
「国際HAN-ZOU整体専門学院」の制作に携わった際に使用したスライドショウの実装方法をメモ。動きをつけながらのフェードインなので、画像を切り替えるのみよりも印象に残りやすいのと、表示幅の限られた中で、広がりを演出したい時に便利。 HTML <div id="mainimage"> <ul> <li id="topimage01" class="active"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> <li id="topimage02"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> <li id="topimage03"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> </ul> </div> <script> $(function(){ setInterval('slideSwitch()', 5000 ); //5000は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ position: relative; overflow: hidden; } #mainimage ul li.active{ z-index: 9; } #mainimage ul li.last-active{ z-index: 8; } #mainimage{ width: 100%; position: relative; } #mainimage ul{ position: absolute; top: 0; left: 0; width: 100%; } #mainimage ul li{ width: 110%; position: absolute; top: 0; right: -10%; z-index: 6; } #mainimage #topimage01{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage02{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage03{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage .inner{ position: absolute; left: 30px; bottom: 30px; z-index: 10; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); $active.addClass('last-active'); $next.css({'opacity':'0', 'right':'0'}) .addClass('active') .animate({'opacity':'1.0', 'right':'-10%'}, 3000, function(){ //(3000は画像が表示されるまでにかかるミリ秒) $active.removeClass('active last-active'); }); }; 一般社団法人国際整体療法師協会 直轄校 国際HAN-ZOU整体専門学院
