- 締切済み
キーエンス社のトップコンテンツのような動的なコンテンツのスクリプト
javaScript初心者です。どうぞよろしくお願いします。 http://www.keyence.co.jp/ このサイトのトップの様なコンテンツを作りたいです。 1：一つ一つの中身はflashで 2:時間が立てば次の項目に自動スクロール 最低限上記を必要としたいです。 javaScriptをしっかり扱えるようになりたいので 解説等もいれていただけたら幸いです。 図々しくて恐縮ですがどなたかよろしくお願い致します。 html----------------------------------------------- <body> <div id="rollover"> <p><img src="rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></a></p> <ul id="thumb"> <li><a href="#"><img src="rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></li> <li><a href="#"><img src="rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li> </ul> </div> </body> </html> css--------------------------------------------- <style type="text/css"> /* ロールオーバー */ ul,li{ padding:0;margin:0; } div#rollover { height:295px; width:580px; } div#rollover p { float:left; margin:0; } div#rollover ul { float:right; width:150px; list-style:none; } div#rollover li { height:50px; } div#rollover a img { border:0; } </style> javaScript------------------------------------------ <script type="text/javascript"> //<![CDATA[ window.onload =function(){ var myImg = document.getElementById("thumb").getElementsByTagName("img"); var regrep = "_thumb"; var newimg = new Array(); for (var i = 0; i <myImg.length; i++) { newimg[i] = new Image(); newimg[i].src = myImg[i].src; myImg[i].onmouseover =function() { var href = this.src.replace(regrep,""); document.getElementById('rollover_view').src=href; } } } //]]> これは拾ったフリーのもののソースなのですが これを改造したほうがやりやすいようでしたら その旨をご教授いただきたいです。 どうぞよろしくお願い致します。
- gobou87
- お礼率23% (3/13)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
＞これは拾ったフリーのもののソースなのですが ロールオーバーをやりたいのでしょうか？ ご質問の内容とは違うように思われますが… 拾うなら、とりあえず、ご提示のサイトのソースをご覧になることをお勧めします。それなりにコメントが入れてあるので、比較的わかりやすいかと。 しくみがわかれば、改造も比較的簡単かと… ＞2:時間が立てば次の項目に自動スクロール のような機能はご提示のサイトにはないと思いますが、指定時間後に処理を実行させる方法があるので、そのあたりを利用するのがよろしいかと… http://www.openspc2.org/JavaScript/reference4/timer/setTimeout/index.html http://javascriptist.net/ref/window.settimeout.html
