キーエンス社のトップコンテンツのような動的なコンテンツのスクリプト

締切済

質問者：gobou87
質問日時：2009/12/27 16:28
回答数：1件

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;
}
}
}
//]]>

これは拾ったフリーのもののソースなのですが
これを改造したほうがやりやすいようでしたら
その旨をご教授いただきたいです。
どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2009/12/28 11:13

＞これは拾ったフリーのもののソースなのですが

ロールオーバーをやりたいのでしょうか？
ご質問の内容とは違うように思われますが…

拾うなら、とりあえず、ご提示のサイトのソースをご覧になることをお勧めします。それなりにコメントが入れてあるので、比較的わかりやすいかと。
しくみがわかれば、改造も比較的簡単かと…

＞2:時間が立てば次の項目に自動スクロール
のような機能はご提示のサイトにはないと思いますが、指定時間後に処理を実行させる方法があるので、そのあたりを利用するのがよろしいかと…
http://www.openspc2.org/JavaScript/reference4/ti …
http://javascriptist.net/ref/window.settimeout.h …