- ベストアンサー
http://www.rapty.com/
http://www.rapty.com/ 上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。 さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。 これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか？
- goaldast
- お礼率46% (97/210)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
素のままでやってみたらちょっと長くなってしまった。 考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。 hover時の枠の部分を画像でやっていないので、ちょっと似てない。（画像に変えれば似ると思う） メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> #wrapper { width:780px; height:300px; border:2px ridge #eee; position:relative; overflow:hidden;} #navi { list-style:none; margin:2px; padding:0; position:absolute; right:0; z-index:10; font-size:0; } #navi li { padding:2px; padding-left:15px; } #navi li.active { background-color:#f44; } #navi li a { display:block; text-decoration:none; } #navi li img { width:200px; height:70px; _height:69px; border:0; } #content { list-style:none; margin:0; padding:0; position:relative; } #content li { position:absolute; width:780px; height:300px; display:none; overflow:hidden; background-color:#cfe;} #content li a { display:block; width:100%; height:100%; text-decoration:none; color:#000; } #content li.active { display:block; } li#mask { background-color:#fff; display:none; z-index:5; filter:alpha(opacity=0); opacity:0; } </style> </head> <body> <div id="wrapper"> <ul id="navi"> <li class="active"><a href="test1.html"><img src="A.jpg" alt="#"></a></li> <li><a href="test2.html"><img src="B.jpg" alt="#"></a></li> <li><a href="test3.html"><img src="C.jpg" alt="#"></a></li> <li><a href="test4.html"><img src="D.jpg" alt="#"></a></li> </ul> <ul id="content"> <li id="mask"> </li> <li class="active"> <a href="test1.html"> content1 <br>ここは画像1枚でもいいし、 <br><strong>文章でもいい。</strong> <br>ただし、はみ出しても表示されない。 <br><img src="E.jpg" alt="picture" style="margin-top:150px;"> </a> </li> <li> <a href="test2.html">content2</a> </li> <li> <a href="test3.html">content3</a> </li> <li> <a href="test4.html">content4</a> </li> </ul> </div> <script type="text/javascript"> <!-- (function() { var u = document.getElementById('navi'); var mask = document.getElementById('mask'); var navs = document.getElementById('navi').getElementsByTagName('LI'); var cnts = document.getElementById('content').getElementsByTagName('LI'); var grovalTid, maskTid, duration = 5000; try { u.addEventListener("mouseover", func, false); } catch(e) { u.attachEvent("onmouseover", func); } grovalTid = setTimeout(change, duration); function func(evt) { var t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; while (t.nodeName != 'LI') t = t.parentNode; if (modeSet(t, 0)) return; fadeIn(t); } function fadeIn(e) { var i, k; clearTimeout(grovalTid); if (maskTid) clearInterval(maskTid); maskTid = setInterval(fade(), 40); for (i=0; i<navs.length; i++) { k = e==navs[i]?1:-1; modeSet(navs[i], k); if (cnts[i+1]) modeSet(cnts[i+1], k); } } function fade() { var o = 95; setOpacity(mask, o); mask.style.display = 'block'; return function() { o -= 5; o = Math.max(o, 0); setOpacity(mask, o); if (o > 0) return; clearInterval(maskTid); maskTid = null; mask.style.display = 'none'; grovalTid = setTimeout(change, duration); } } function change() { for (var i=0; i<navs.length; i++) if (modeSet(navs[i], 0)) break; fadeIn(navs[++i % navs.length]); } function modeSet(e, n) { if (n>0) { e.className += ' active'; } else if (n==0) { return e.className.match(/(^|\s)active$/); } else { e.className = e.className.replace(/(^|\s)active$/, ''); } } function setOpacity(e, o) { e.style.filter = 'alpha(opacity=' + o + ')'; e.style.opacity = o / 100; } })(); //--> </script> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
No2です。 ＞実際にはサイズを変えて使う（横幅を縮める）かもしれないので、 ＞そのへんはcssの部分をいじるだけで、～～ 基本的にはそのようにしてあるつもりです。 サムネイル、メインの部分のどちらも、<li>にclass="active"が設定されているものが表示される仕組み。 javascriptでやっているのはこのクラスを切り替えることと、切り替え時のフェードインの処理だけです。 サイズや色などは変更しても問題ないはずです。 （大きさになどで関連のある要素があるので、そのあたりは調整が必要） ついでに、 li#mask { background-color:#fff; display:none; z-index:5; filter:alpha(opacity=0); opacity:0; } は、 li#mask { background-color:#fff; display:none; z-index:5; } だけでよかったですね。 （最初opcityだけで処理していたのをdisplayも操作することにしたときに、不要になったのを消すのを忘れた）
お礼
ありがとうございます！本当に助かりました。 Javascriptをそこまで触らなくてすむのなら出来そうです＾＾
- higee
- ベストアンサー率30% (4/13)
jQueryをしようすれば出来るのではないでしょうか。 スライド系のプラグインは色々と配布されているので、 一から作るよりはこういったものを利用したほうが良いかと思います。 ただ、上記のものと全く同じようにするとなると カスタマイズが必要になってきます。 javascriptの経験があればjQueryの癖はありますが、 慣れれば大丈夫かと。
お礼
ありがとうございます。 jQueryいろいろ調べてみようかと思います。 Javascriptに関してはまだまだ勉強始めの素人ですがなんとか頑張ってみたいと思います！！
補足
ありがとうございます！ すごいですね！私の求めていたものそのものです＾＾ メインの部分は1枚画像で行うつもりです。 あと、実際にはサイズを変えて使う（横幅を縮める）かもしれないので、そのへんはcssの部分をいじるだけで、javascriptの部分はさわらなくても大丈夫でしょうか？