http://www.rapty.com/
上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。
さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。
これはもちろんフラッシュで作られているのですが、これを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も操作することにしたときに、不要になったのを消すのを忘れた)
No.1
- 回答日時:
jQueryをしようすれば出来るのではないでしょうか。
スライド系のプラグインは色々と配布されているので、
一から作るよりはこういったものを利用したほうが良いかと思います。
ただ、上記のものと全く同じようにするとなると
カスタマイズが必要になってきます。
javascriptの経験があればjQueryの癖はありますが、
慣れれば大丈夫かと。
ありがとうございます。
jQueryいろいろ調べてみようかと思います。
Javascriptに関してはまだまだ勉強始めの素人ですがなんとか頑張ってみたいと思います!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- Windows 10 (緊急)windowsのタスクバーやアプリ?が反応しない 3 2023/03/28 05:03
- PHP 画像ファイルの名前をそのままURLにする 3 2022/10/16 11:18
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- その他(ソフトウェア) Figma 1 2023/06/23 14:22
- HTML・CSS WEBサイト 画像の直接リンクについて 1 2022/11/16 10:41
- その他(映画) 昔の映画の3Dリメイク版。どうやって作るのか? 4 2023/02/16 10:17
- iPhone(アイフォーン) iPad iPhoneでアプリ切り替えを下画面を左右にスワイプするとアプリが切り替わると思うのですが 1 2022/03/30 04:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューが開い...
-
[jQuery]bxSlider 一番最後と...
-
Slick.jsのオプションrtlについて
-
javascript 神経衰弱
-
神経衰弱 順番に裏返し
-
MAX関数を使ってからLEFT JOIN...
-
JQueryタブのアクティブ アン...
-
setAttributeによる画像の差し替え
-
【CSS】floatで左右に並べた...
-
HTMLタグに複数のクラスを設定...
-
1枚の画像をクリックして複数の...
-
flexBOX同士の間隔
-
JavascriptでDIV~DIVをリロードで
-
html スクロール要素を下から表...
-
libjpegライブラリの使い方につ...
-
window.openで値の渡し方を教え...
-
jqueryのsortableで一部ソート...
-
HTMLとJavaScriptで作ったタイ...
-
error LNK2019 未解決のシンボ...
-
c++std::string型をTCHARに変換...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
横並びの画像を3枚時間差でフェ...
-
CSSでマウスオーバーした画像を...
-
bxSliderのランダム表示について
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
キャラクターがぴょこんと飛び...
-
順番にクラスをつけていく方法
-
アコーディオンメニューが開い...
-
【iOS及びAndroid】リンク画像...
-
エンドロールを枠の中で表示す...
-
liの数によってulの横幅を動的...
-
jqueryで画像をスライドさせる方法
-
Javascriptで画像のフェードイン
-
楽天APIのデータをjqueryのgetJ...
-
html5に変えるとスライドショー...
-
チェックボックスと画像切替の連動
-
画像をフェードアウト&フェー...
-
画像とテキストの移動
おすすめ情報