アメブロのヘッダーをスライドショーにしてみました。
jqueryでいろいろ出来るという記事を読んだので、
ヘッダーをスライドショーにしてみました。
毎回同じ順番だと面白くないので、ランダムに4件読み込むようにしています。
フリープラグインに記述しています。(<>は半角です。)
<script type="text/javascript">
function shuffle(a, n){
var r = a.concat(), l = r.length, n = n < l ? n : l, i = l, j, t;
for(i = l; i;) t = r[j = Math.random()*i--|0], r[j] = r[i], r[i] = t;
r.length = n;
return r;
}
var ar=[
["10250","1011","デンマーク発のカジュアルブランド、ジャンクデラックス"],
["10254","1014","Re-Hashの流れを汲む、イタリア発のプレミアムデニムブランド"],
["10228","1010","イタリア、パンツ専門ブランドのこだわりデザインパンツ"],
["10249","1012","スウェーデン発のカジュアルブランド「エンコア」"],
["10240","1009","イタリア製パンツ専門ブランド、CBXのミリタリーパンツ"],
["10156","1015","イタリアのプレミアムデニムブランド「Re-HasH」"],
["10265","1017","アンディウォーホルが名付けたことで有名なチャックローストのデニムを90%OFF以上で販売中!"]
];
var ar_random=shuffle(ar,4);
$(document).ready(function(){
var count = 0, interval = 5;
setInterval( function() {
$("#header").fadeOut(800, function(){
$("#header").css("backgroundImage", "url(http://www.arcp.jp/img/banner/" + ar_random[count][1] + ".jpg)").fadeIn(800);
});
count = ++count%ar_random.length;
}, interval*1000);
});
</script>
ヘッダーをスライドショーにしてみました。
毎回同じ順番だと面白くないので、ランダムに4件読み込むようにしています。
フリープラグインに記述しています。(<>は半角です。)
<script type="text/javascript">
function shuffle(a, n){
var r = a.concat(), l = r.length, n = n < l ? n : l, i = l, j, t;
for(i = l; i;) t = r[j = Math.random()*i--|0], r[j] = r[i], r[i] = t;
r.length = n;
return r;
}
var ar=[
["10250","1011","デンマーク発のカジュアルブランド、ジャンクデラックス"],
["10254","1014","Re-Hashの流れを汲む、イタリア発のプレミアムデニムブランド"],
["10228","1010","イタリア、パンツ専門ブランドのこだわりデザインパンツ"],
["10249","1012","スウェーデン発のカジュアルブランド「エンコア」"],
["10240","1009","イタリア製パンツ専門ブランド、CBXのミリタリーパンツ"],
["10156","1015","イタリアのプレミアムデニムブランド「Re-HasH」"],
["10265","1017","アンディウォーホルが名付けたことで有名なチャックローストのデニムを90%OFF以上で販売中!"]
];
var ar_random=shuffle(ar,4);
$(document).ready(function(){
var count = 0, interval = 5;
setInterval( function() {
$("#header").fadeOut(800, function(){
$("#header").css("backgroundImage", "url(http://www.arcp.jp/img/banner/" + ar_random[count][1] + ".jpg)").fadeIn(800);
});
count = ++count%ar_random.length;
}, interval*1000);
});
</script>


