スライドショーを複数表示する
ページ内にシンプルなスライドショーを設置した場合のコードメモ。2個のスライド画像のタイミングをずらしたい時に使います。
ヘッダーに記述するコード
function slideSwitch() { var $active = jQuery('#slideshow IMG.active'); if ( $active.length == 0 ) $active = jQuery('#slideshow IMG:last'); var $next = $active.next().length ? $active.next() : jQuery('#slideshow IMG:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } function slideSwitch2() { var $active2 = jQuery('#slideshow2 IMG.active'); if ( $active2.length == 0 ) $active2 = jQuery('#slideshow2 IMG:last'); var $next2 = $active2.next().length ? $active2.next() : jQuery('#slideshow2 IMG:first'); $active2.addClass('last-active'); $next2.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active2.removeClass('active last-active'); }); } jQuery(function() { setInterval( "slideSwitch()", 5000 ); setInterval( "slideSwitch2()", 6000 ); });
スライド表示するHTML
コード内のIDで識別します。
#slideshow
#slideshow2
カテゴリー:WordPress