2008年09月22日
★Cool にソラマメをカスタマイズする！-Case.12-
【第 72 話】 記事内の画像をCool なスライド画像に変えてみる！- 続・JavaScript 編 -
The story [72] try to change the images Cool! - Continued JavaScript Chapter -
★外国産の女性二人がヒマを持て余した日にゃ、H なnoobs をからかいに来るのが定番らしい。
- by Lovely Wolf -
★オレのことをH なnoobs だと思って近寄ってきたゾ。
★ムムっ！ゴージャスなランジェリーに、グローブにアームリング！おぬし、デキる・・・。
★かいきゃぁぁく。
★まさか、エスコートじゃないだろうな？とりあえずプロフをチェックしてと。
★もいちど、かいきゃぁぁく。・・・エスコートじゃなかったので、パックにつめて新鮮なうちにお持ち帰りとするか。
★本日のお題は、「JavaScript を使って記事内の画像をCool なスライド画像に変えてみる」です。
・・・もちろん、Flash でもなければ、GIF アニメでもなく、他のブログからファイルを読み込んでるわけでもない。ちょこっとJavaScript を今日の記事に書いたらできてしまったワケさ。
・・・一定時間ごとに画像を切り替えるためにsetTimeout という関数を使っていることと、スムーズに画像を表示させるために先読みさせていること、記事の改行には<br> タグが自動的に入るため一行で書く必要があることくらいか。次回、もう少しくわしく紹介する予定だ。
<script>window.onload=function(){var imgary = new Array('<img src="//img01.tec29.com/usr/lovelywolf/08092206.jpg" alt="" >', '<img src="//img01.tec29.com/usr/lovelywolf/08092207.jpg" alt="" >', '<img src="//img01.tec29.com/usr/lovelywolf/08092208.jpg" alt="" >', '<img src="//img01.tec29.com/usr/lovelywolf/08092209.jpg" alt="" >', '<img src="//img01.tec29.com/usr/lovelywolf/08092210.jpg" alt="" >');randomimage1();function randomimage1(){var num = Math.floor((Math.random() * 100)) % imgary.length;document.getElementById("slide").innerHTML=imgary[num];timerID1=setTimeout(randomimage1, 500);};}</script>
<div id="slide" style="background-color:#000;width:500px;height:500px;"><img src="//img01.tec29.com/usr/lovelywolf/08092210.jpg" /></div>
★JavaScript を起動する部分となる<body onload="Javascript:function();"> とwindow.onload = funciton(){} は競合してしまうため、<body onload=""> を使って背景画像をアニメーションにしているオレのブログでは記事にスクリプトを入れると動かなくなるらしい。
【Cool な背景に変えてみる！- JavaScript 編 - 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e374231.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e374675.html
Posted by Lovely Wolf at 12:25│Comments(0)
│【画像/スライド】
