• 締切済み

複数の写真がマウスで左右に移動するスライドショー

初めて質問させて頂きます！ 自力でどうしても見つけることができませんでしたので、 コード等に詳しい方に是非教えて頂きたいです。。。！ http://www.flandre.ne.jp/30th/ こちらのサイトのように、写真のサムネイルが横に並んでおり、 マウスの動きに連動して左右に動いて、 マウスオーバーで画像が変わるようなスライドショーを Flash以外（Javascript等）で作りたいと思っております。 このような動きのサンプルのURLやコードのページがあれば 是非教えて頂けませんでしょうか・・・！ 何卒よろしくお願いいたします。。！！！

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.5

---つづき--- 　・当方のブラウザは古いので、クラスｐ1、ｐ2を用いていますが、最近のブラウザなら 　　nth-childが使えるので、クラス設定も不要かと思います。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body{ background-color:#444; } div#sample{ height:280px; overflow:hidden; margin-top:200px; position:relative; } #sample ul, #sample ul li{ list-style-type:none; margin:0; padding:0; } #sample ul{ position:absolute; } #sample li{ 　width:178px; height:278px; float:left; 　position:relative; overflow:hidden; 　border:1px solid #000; 　border-color:#888 #000 #000 #888; } #sample li div{ 　width:100%; height:100%; text-align:center; 　position:absolute; top:0; left:0; 　padding-top:100px; cursor:pointer; } #sample li div.p1{ 　font-size:4.5em; background-color:#aaa; } #sample li div.p2{ 　color:#fff; font-size:2.5em; background-color:#666; } </style> </head> <body> <div id="sample"> <ul> <li><div class="p1">01</div><div class="p2">image01</div></li> <li><div class="p1">02</div><div class="p2">image02</div></li> <li><div class="p1">03</div><div class="p2">image03</div></li> <li><div class="p1">04</div><div class="p2">image04</div></li> <li><div class="p1">05</div><div class="p2">image05</div></li> <li><div class="p1">06</div><div class="p2">image06</div></li> <li><div class="p1">07</div><div class="p2">image07</div></li> <li><div class="p1">08</div><div class="p2">image08</div></li> <li><div class="p1">09</div><div class="p2">image09</div></li> <li><div class="p1">10</div><div class="p2">image10</div></li> <li><div class="p1">11</div><div class="p2">image11</div></li> <li><div class="p1">12</div><div class="p2">image12</div></li> </ul> </div> <script type="text/javascript"> (function(){ 　var Slider = function(id){ init.call(this, id); }; 　Slider.prototype.handler = function(evt){ 　　var t = evt.target || evt.srcElement; 　　if(t.className != "p1" && this.hidden){ 　　　this.hidden.style.visibility = "visible"; 　　　this.hidden = null; 　　} 　　if(t.className == "p2"){ 　　　t.style.visibility = "hidden"; 　　　this.hidden = t; 　　} 　　var w = this.box.clientWidth; 　　var n = (evt.clientX * 10 - w) * this.n / w / 8 | 0; 　　n = (n >= this.n)?(this.n - 1):(0 > n?0:n); 　　if(n != this.target) this.target = n; else return; 　　var item = this.items[n]; 　　var minPos = w - this.element.clientWidth; 　　if(minPos>0) minPos = 0; 　　var left = w/2 - item.offsetLeft - item.clientWidth/2 | 0; 　　left = Math.max(Math.min(left, 0), minPos); 　　animate(this, left); 　} 　var animate = function(obj, end){ 　　clearInterval(obj.Id); 　　var pos = obj.position; 　　var dir = pos - end > 0?-1:1; 　　obj.Id = setInterval(function(){ 　　　var step = Math.sqrt(Math.abs(end - pos)/8) | 0; 　　　if(step<1) step = 1; 　　　pos += dir * step; 　　　if((0>dir && end>=pos) || (dir>=0 && pos>=end)) pos = end; 　　　obj.element.style.left = pos + "px"; 　　　obj.position = pos; 　　　if(pos==end) clearInterval(obj.Id); 　　}, 30); 　} 　var init = function(id){ 　　var box = this.box = document.getElementById(id); 　　var ul = this.element = box.getElementsByTagName("ul")[0]; 　　box.style.width = "3000px"; 　　var position = ul.clientWidth; 　　ul.style.width = position + "px"; 　　box.style.width = ""; 　　position = Math.min(((box.clientWidth - position)/2 | 0), 0); 　　this.position = position; 　　ul.style.left = position + "px"; 　　this.items = ul.getElementsByTagName("li"); 　　this.n = this.items.length; 　　this.target = 0; 　　this.hidden = this.Id = null; 　} 　var slider = new Slider("sample"); /*@cc_on@*/ 　document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/'mousemove', function(evt){ slider.handler(evt); }, false); })(); </script> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

A No1、3です。 どなたかが回答なさるかと思っていたのですが… 移動のしかたが普通のスライドショーなどとは異なるので、サンプルはあまりないのではないかと思います。 考え方や方法もいろいろあると思いますので、雰囲気だけのサンプルです。 （あくまでもサンプルなので、細かなところはいい加減です） 　・画像までを付けられないので、画像の部分は<div>で代用しています。 　　（HTMLによってはCSS等の調整が必要になります。） 　・画面の幅の中央部80％の部分を画像枚数で分割し、マウス位置に対応する 　　画像を中央近くに表示するように移動させています。（端部の画像がある限り） 　・hoverのイベント処理をmousemoveで兼用して拾っていますので、画像上にマウス 　　を固定している時に画像移動の結果hover状態が変わっても反応しません。 　　（反応させるのなら、mouseoverなどでイベントを別に処理してください） 　・移動する量に応じて、若干の速度調整を行なうようにしています。（easing） 　・クリックした際の処理が不明なので、クリックには何も対応していません。 　・画面をリサイズしてもフォローできるはずですが、瞬時対応にはなっていません。 　　（リサイズイベントを監視してはいないので） （全角空白は半角に） …と思ったら文字数オーバーになってしまったので、次に続きます。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

A No1です。 ＞トップページではなくてその先に進んだページのことだと思いますよ そうでしたか。 失礼しました。勘違いしてしまったようですね。 質問者様にはスルーしてくださるようお願いします。 ＞ちなみに回転程度ならCSSで超楽にできます 投稿してから、CSSもあったと思い出しましたが、CSSで回転できるブラウザのユーザ割合はまだそれほどでもないのかなと思ったこともあって、連投しなかったというのもあります。（←言い訳）

gooyay
質問者

補足

http://www.flandre.ne.jp/30th/ こちらのURLの、30週年限定！のアイコンを クリックした先のページに関してになります。 マウスの動きと連動して、並んだ写真を動かしたいのです…！

全文を見る
すると、全ての回答が全文表示されます。
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

＞＞回答者１さん トップページではなくてその先に進んだページのことだと思いますよ ちなみに回転程度ならCSSで超楽にできます

gooyay
質問者

補足

補足下さり、誠にありがとうございます！！

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

＞マウスの動きに連動して左右に動いて、 御提示のサンプルでは画像がそれぞれ別方向に回転していますが、『左右に動いて』とは違うように見えますが… 左右に動くだけなら普通によくあるスクリプトを（画像ごとに違う方向に？）適用すればよろしいかと。 回転はちょっと面倒かも知れません。 検索してみると、これまでのスクリプトではjQueryベースのこんな（↓）ライブラリがありました。 　http://code.google.com/p/jqueryrotate/ アニメーションにも対応している様なので、個々の画像を回転させればよろしいかと。 あるいは、HTML5であればcanvasが使えるので回転も比較的簡単におこなえます。 　http://serennz.sakura.ne.jp/sb/log/eid108.html ＩＥ限定でよければCSSのfilterで画像の回転が可能です。（これが一番簡単かも知れません） 　http://html-time.com/java/move_angle.htm 個々の要素を要素として扱いたいのなら、SVGを利用する方法もありそうです。 例えば、 　http://raphaeljs.com/image-rotation.html こちらの例もライブラリを用いています。 ＞マウスオーバーで画像が変わるようなスライドショーを ご希望の動作がよく理解できていませんが、マウスオーバーで画像が変わるサンプルはいくらもあると思いますので、検索すれば沢山ヒットすることでしょう。 御質問内容として、いろいろな動作を組合せて使いたい様に推察されますが、そのような特殊なものになると、そのままピッタリのものはないでしょうから既存のものをカスタマイズするか、自作するかになりそうな気がします。 （例えば↑に挙げた回転の例も一つの要素の回転の例ですが、これを複数に対応させるのにも、探すよりも自作した方が早そうです）

gooyay
質問者

補足

早速のご回答誠にありがとうございます！！ こちらの説明が分かりづらく、申し訳ございませんでした。。 上で補足させて頂きます！！！

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JQueryでサムネ付スライドショークロスフェード

    JQueryでクリックを使用せず、自動クロスフェードのサムネイル付きスライドショー&マウスオーバーでもクロスフェードで切り替わるようにするためにはどうすればよいでしょうか？ 更にはスライドショーにキャプションがつけられたら最高です。 スライドショーの幅はwidth: 354px; height: 280px;、サムネイルはその下に縦3つ、横3つの計9つ配置します。 スライドショーは自動フォロスフェードによるループ、またサムネイルをマウスオーバーでもその画像にクロスフェードイン、その際スライドショー内に表示されている&マウスオーバーされているサムネイルの画像は罫で仕切るか、半透明がクリアに表示されるといった処理を考えております。 恥ずかしながら調べても分からなかったので、皆さまの知識を拝借したく投稿させて頂きました。 恐れ入りますが、何卒ご助言下さいますよう、よろしくお願い致します。

  • サムネイルスライドショーについて

    サムネイルスライドショーについて http://myisland.jp/template/tips/gallery/gallery01/index.html 上記のサンプルコードを使用させていただこうかと思っておりますが 同一ページに複数設置して個別に稼働させる場合はどのように変更すれば良いでしょうか？ 初心者ですが何卒よろしくお願い致します。

  • Flashのスライドショーについてご教授ください

    Flashで困っています！わかる方ご教授お願いします。 タイムラインでスライドショー程度しか作ったことがないFlashど素人なんですが、需要があって四苦八苦しています。 内容はこちら↓ ・写真5枚、写真と連動したテキストのスライドショー（横または縦の動き） ・「次へ」などのボタンは不要 ・最後にstop();またはループ ・写真は季節ごとに差し替えの更新があるので外部から読み込める仕様 ・お客様でも写真を差し替えれば可能な状態 アクションスクリプトじゃなきゃできないのか、タイムラインだけで大丈夫なのか、部分的にスクリプトを書けば可能なのかお教えいただけませんでしょうか。 それか、今さらFlash？っていう人もいるかと思います。 jQueryとかでも実装が可能でしたらご教授いただければと思います。 お手数おかけしてすみませんが、よろしくお願いします。

  • JavaScriptでスライドショー

    Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示するコンテンツを盛り込みたいと思っております。 現在サンプルを探しているのですが、数はあれどもなかなかこれといったものが見つけられません。 そこで下記の要望に適したサンプルがあれば教えて頂きたいです。 ・画像のスライドショー機能（自動開始が望ましいです） ・指定フォルダ内の不特定多数の画像を読み込める（そこに画像を追加したら自動で反映される） ・画像のミニビュー？が横に表示される 以上です。重要なのは1個目と2個目です。 エフェクトなどはまったくこだわるつもりが無いので、シンプルなものでも大丈夫です。 近いものでもかまいませんので教えて頂きたく。 宜しくお願い致します。

  • JavaScriptでスライドショー。サンプル

    JavaScriptでスライドショー。サンプルありませんか JavaScript、もしくは(FLASHなどの)アドオンが必要ない何らかの手段でスライドショー的なモノを作りたいです。 例えばYahoo!ニュースの写真付きの記事 http://headlines.yahoo.co.jp/hl?a=20111101-00000010-rps-soci.view-000 真ん中に写真があり、左右にボタンが付いていて、押せば前や次に移動できる。 こういうヤツのサンプルがあれば紹介して下さい。 要件は以下です。 ・真ん中に写真があり、左右にボタンが付いていて、押せば前や次に移動できる。 ・写真をクリックするとURLにジャンプする。 ・できるだけスタイリッシュ。 ・無料 以下の機能があればなお嬉しいです。 ・自動的にスクロールする機能がある。 以上、宜しくお願いします。

  • ホームページのスライドショーについて

    http://www.jeanasis.jp/ 上記のホームページのように左右いっぱいにスライドするものを作りたいと思っております。 jQueryのライブラリーを探したのですが、みつからず、これはFlashで作っているものでしょうか？ ちなみにFlashはあまり得意ではないのですが、すぐに同じようなものを作らないといけないので困ってます。 サンプル等があればとてもありがたいのですが、どなたかおわかりになる方いらっしゃいますか？

  • Flash5Jでスライドショー

    Flashを使うのは初めてなので作り方の入門コースのWEBページを 教えて頂けませんか？ スライドショーを作りたいのでその作り方の解説や サンプルがあるとうれしいです。

  • メイン画像とサムネイル画像のスライドショー

    サムネイル付きのスライドショーのJavaScriptを探しているのですが、サムネイル画像がメイン画像の上にくるスライドショーはありますか？ イメージを添付します。 http://black-flag.net/jquery/20111122-3597.html 上記のサイトとかでcssを使用してみたのですが、メイン画像の下にサムネイル画像がきてしまいます。 サムネイル画像をメインの画像の上にもっていくことはもしかしてできないのでしょうか。 よろしくお願いします。

  • アンドロイドでも使えるスライドショー　サンプル

    こんにちは、 pc、アンドロイドでも使えるスライドショーのサンプルを探しています。 お勧めありますでしょうか？ http://www.agilecarousel.com/flavor_1.htm とかあったのですが、このコードだけでは動かなかったもので。

  • ちょっと複雑なスライドショーについて

    スライドショーの実装について解決出来ず、お教え頂ければと思い質問致しました。 具体的には http://www.primaham.co.jp/ こちらのページと全く同じ動きにしたいと思っています。（左右がぼやけている。中央は画像がアップになる等） JSファイルやcssをローカルにコピーして整理して、画像やファイル名のパスを修正してみたのですが動いてくれません。 実際にコードがあるのに何を馬鹿なことをとお思いでしょうが、これらを自分の環境で動かすにはどのように修正すればよいのでしょうか。 お教え頂ければ幸いです。宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する