http://www.rapty.com/
上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。
さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。
これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか?
No.1
- 回答日時:
jQueryをしようすれば出来るのではないでしょうか。
スライド系のプラグインは色々と配布されているので、
一から作るよりはこういったものを利用したほうが良いかと思います。
ただ、上記のものと全く同じようにするとなると
カスタマイズが必要になってきます。
javascriptの経験があればjQueryの癖はありますが、
慣れれば大丈夫かと。
ありがとうございます。
jQueryいろいろ調べてみようかと思います。
Javascriptに関してはまだまだ勉強始めの素人ですがなんとか頑張ってみたいと思います!!
No.2ベストアンサー
- 回答日時:
素のままでやってみたらちょっと長くなってしまった。
考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
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>
この回答への補足
ありがとうございます!
すごいですね!私の求めていたものそのものです^^
メインの部分は1枚画像で行うつもりです。
あと、実際にはサイズを変えて使う(横幅を縮める)かもしれないので、そのへんはcssの部分をいじるだけで、javascriptの部分はさわらなくても大丈夫でしょうか?
No.3
- 回答日時:
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も操作することにしたときに、不要になったのを消すのを忘れた)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【jQuery】2分割レイアウトで、...
-
リモートロールオーバーを教え...
-
jQueryのプラグイン(画像処理...
-
MAX関数を使ってからLEFT JOIN...
-
jQueryで電卓を作っているのですが
-
javascriptを使って画像を切り...
-
jQueryスライドショー画像への...
-
c++std::string型をTCHARに変換...
-
JQueryタブのアクティブ アン...
-
画像のランダム表示が遅い?
-
jquery ドロップダウンメニュー...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
フラッシュの様に
-
マウスオーバーで他の2個の画像...
-
Vb.net2005での画像の合成方法
-
onとoffを画像でチェンジ、チェ...
-
外部ファイルにしたら文字化け...
-
スクロール可能なチェックボックス
-
Javascript初心者|jQueryの.va...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
画像をフェードアウト&フェー...
-
チェックボックスで画像を一括表示
-
[jQuery]bxSlider 一番最後と...
-
jsでグリッドデザインのサムネ...
-
【jQuery】2分割レイアウトで、...
-
liの数によってulの横幅を動的...
-
同一ページ内の複数のタグに同...
-
jqueryサブウィンドウにて画像...
-
神経衰弱 順番に裏返し
-
Javaスクリプトで画像を縦にス...
-
一定時間ごとに画像を切り替え...
-
横並びの画像を3枚時間差でフェ...
-
Javascriptを使用したスライド...
-
順番にクラスをつけていく方法
-
bxSliderのランダム表示について
-
html5に変えるとスライドショー...
-
エンドロールを枠の中で表示す...
-
javascriptで吹き出し
-
ご教授ください。
おすすめ情報