テスト20150506TUE

画像をクリック

他にやりたくなった事が出来たのでslideSwitchのコードをまとめておく投稿

以下に記述されたコードはアメブロ用にカスタムされているので、知らずにサイトに埋め込んだ暁にはエラーを引き起こす原因に綱がるため十分お気をつけください。尚、本記事に掲載されたコードを使うに当たっては完全自由ですが、自己責任でお願いします。当ブログでは一切感知いたしかねます。

フリープラグインに書くJavascriptコード

function slideSwitch() {

var $active = $('#slideshow img.active');

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

var $next = $active.next().length ? $active.next() : $('#slideshow 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()", 5000 );

});

</script>

サイドバーへのマークアップHTMLコード

<div id="slideshow"><!--

--><img src="http://stat.ameba.jp/user_images/20121022/20/shvirz/fe/97/p/o0800045012249838493.png" width="665" alt="某ブラウザのロゴは・・・" class="active" /><!--

--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/aa/72/j/o0450075013009096930.jpg" height="374" alt="ガンタンク"><!--

--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/4e/bd/j/o0500056813009096932.jpg" height="374" alt="バイカー「ナポレオン」"><!--

--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/dd/4f/j/o0800060013009096931.jpg" height="374" alt="鼻パピコJK"><!--

--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/6a/a8/j/o0800060013009096933.jpg" height="374" alt="取り締まった事例は無い"><!--

--></div>
HTMLコメントコードが入っている理由は、アメブロのサイドバーで改行すると<br />タグが付くから。<br />タグを打ち消すためこのような仕様になってます。もちろん改行せずコメントコードも入れなくても動くことは動くけど、見易さに欠けます。

追加CSSコード

/* ヘッダーにslideSwitch適用 */

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */

.skinContentsArea{

position:relative; /* 絶対配置を置くボックスの基準点、他ブログでは「おまじない」とか書かれてる */

padding-top:374px; /* 画像の高さ分余白をつける */

}

#slideshow{

position:absolute;

margin:0;

padding:0;

width:100%;

height:450px;

top:0;

left:0;

}

#slideshow img {

position:absolute;

top:0;

left:0;

z-index:8;

}

#slideshow IMG.active {

z-index:10;

}

#slideshow IMG.last-active {

z-index:9;

}

アメブロにjQueryスライドショーを付けてみた（表示がちょっとおかしいな）

jQueryが使えるってうれしい限りです。

サイドバーのjQueryバージョン確認ボタンに引き続き、調子に乗って簡易スライドショーをつけてみたんですが、表示がいまいちですね。改良の余地ありです。

画像はドロップボックスにあったもの。一枚おバカあり。
「あれを取り締まった事例は聞いたことがないね」
久しぶりに見ると笑えましたｗ

ってことで本命のコードですが、グローバルナビを作るようにして作成しました。
まずは、HTML。
<div id="slideshow"><img src="http://stat.ameba.jp/user_images/20121022/20/shvirz/fe/97/p/o0800045012249838493.png" width="665" alt="某ブラウザのロゴは・・・" class="active" /><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/aa/72/j/o0450075013009096930.jpg" height="374" alt="ガンタンク"><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/4e/bd/j/o0500056813009096932.jpg" height="374" alt="バイカー「ナポレオン」"><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/dd/4f/j/o0800060013009096931.jpg" height="374" alt="鼻パピコJK"><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/6a/a8/j/o0800060013009096933.jpg" height="374" alt="取り締まった事例は無い"></div>

次に、CSSですね。
.skinContentsArea{
position:relative;
padding-top:374px; /* 画像の高さ分 */
}
#slideshow{
position:absolute;
margin:0;
padding:0;
width:100%;
height:450px;
top:0;
left:0;
}
#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}

最後にjQueryですね。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
$(function(){
    var $active = $('#slideshow img.active');
    if ( $active.length == 0 ) $active = $('#slideshow img:last');
    var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 2000, function() {$active.removeClass('active last-active');});
});
}
$(document).ready(function() {setInterval( "slideSwitch()", 4000 );});
</script>

これでヘッダーに表示させることができました。

この順で出ます。

某ロゴは●●のパクリか？？