• ベストアンサー

スクロールスライドショー

https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js　を使って モニター横100％で画像のスライドショーを作りたいのですが、 高さは300ｐｘくらいで、３枚表示され、マウス操作かボタンクリックで右や左の画像に代わっていく ご指導お願いいたします。

質問者が選んだベストアンサー

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

＞モニター横100％で画像のスライドショーを作りたいのですが、 ＞高さは300ｐｘくらいで、３枚表示され、マウス操作かボタンクリックで ＞右や左の画像に代わっていく どこまでできているのか/ないのか、あるいはどこまでわかっているのか／いないのかを提示しないと回答しようがないのでは？ とりあえず、 （１）画像をリスト（リストでなくても良い）などでHTMLソースに記しておいて、表示/非表示はstyleのdisplayで制御し、一つだけ表示するようにする。 マウスの操作に応じて、次（前）の画像を表示するように切り替える。（クラス設定で切り替えるようにしても良い） とか、 （２）表示用の画像要素（1つ）をソースに用意しておき、表示対象の画像URIを配列などで定義しておいて、マウスの操作に応じてインデックスを増減し、画像要素のURIを変更することで表示を切り替える。 などの方法が考えられます。 切替をスクロールで行なうのであれば、表示位置をアニメーションで移動する（左右なら、leftの値を変えてアニメーション）ようなことが必要になります。 この場合は、単純な切替ではないので、最低でも2つの画像を同時に表示してアニメーションする必要があります。 アニメーションを伴う場合は、（１）の考え方で画像を横に並べておいて、その親要素にoverflow:hiddenを指定しておくことによって見える範囲を1画像分に限定しておき、リスト全体を左右に移動させることでスライドさせているものが多いのではないかと思います。 あるいは、 （３）ご質問のようなスクリプトは、すでに沢山作成されていると思いますので、そういったものを検索して気に入ったものを使うとか… 　　（作ることにはなりませんけれど） 関係ないけれど、なんで「1.4」なんだろうか…？　（最新版は1.7）

oomati91
質問者

お礼

ありがとうございます 1.2.3をやってみます。 ご教授、ありがとうございました。

oomati91
質問者

補足

ありがとうございます。 初心者ではないのですが、初心者のような者で。。。 質問が簡潔すぎて申し訳ありません。 dreamweverを使っているのですが、どうにもうまくできず。。。」

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 横にスクロールするだけのスライドショーを探しています

    こんにちは。 JSとかJQUERYなどを使ってフィルムのように横に流れるスライドショーを探しています。 うまく表現できないのですが、一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものが欲しいのですが、意外に見つからずに困っています。 このようなスライドショーを公開しているサイトさんをご存知でしたらお教えください。

  • jquery

    とあるサイトの 1つのソースの中に <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> と <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> があるのですが この二つは意味が違うのでしょうか？ バージョンが 1.7.1と1.11.1になっていますが 1.11.1が数字が高いから、1.11.1だけあればいいのでしょうか？

  • bxsliderでスライドショーの間違い教えて

    ホームページ制作素人の質問で申し訳ありません。 「bxslider」を用いてスライドショーを作成しようとしていますが、jQueryのホームページから必要ファイルをダウンロードし、ガイドに従いサンプルをコピペして一番基本的な(と思われる)ものを作成してみましたが、張付けた画像が4枚縦に並んで表示されるだけで、「スライドショー」的なものになりません。 プログラムの理解が基本的に不十分な素人の厚かましい質問で恐縮ですが、下記の記述のどこが間違っているか、どう修正すれば良いか、などどなたかご教示下さればありがたく思います。 <head> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="jquery.bxslider.css" rel="stylesheet" /> </head> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({auto: true,autoControls: true}); </script> <ul class="bxslider"> <li><img src="http://www.geocities.jp/画像ファイル1.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル2.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル3.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル4.jpg" /></li> </ul> </html>

  • <hoge />と<hoge></hoge>の違い

    現在jQueryを使ったプログラムをしていて、気になった点があったので質問させていただきました。 具体的には <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"/> <script type="text/javascript"> function show() { } </script> こんなソースを書いていましたが、showメソッドが認識されていませんでした。 そこで <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script> とかくと、後ろのメソッドも認識されました。 ここで疑問なのは</>と</script>の違いです。 この２つは何がちがうのでしょうか？

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

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

  • jQueryが動きません。

    表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。

  • これはどういう意味のコードですか？

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="shift_jis"></script> これはどういう意味のコードですか？ 私のサイトに入ってるコードですが意味が分からないまま使っています。 サイト内でjqueryで検索機能はつけていますが ネットから拾ってきたものを組み合わせたものであり、 意味は分かっていません。 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" の意味だけ教えていただけませんか？ jqueryを使う上での宣言みたいなものでしょうか？

  • 何をする為のjqueryなのでしょうか？

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> は何をする為のjqueryなのでしょうか？ googleと言う単語がパスの中に入ってますが googleに関連するものでしょうか？

  • CrossSlideのスライドショーが中央に設置で

    CrossSlideのスライドショーが中央に設置できなくて困っています。左端には問題なく設置できて動くのですが、中央に指定しても、中央に作ったテーブルの中に入れても、テーブルの中央に入れても、そのまま左端にしか表示されません。 どうしたら中央に表示させることができるでしょうか。 宜しくお願い致します。 下記は、そのソースです。 画像は14ありますが、省略して2個に書き直してあります。 W7で、ブラウザはFireFoxです。 宜しくお願い致します。 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.cross-slide.min.js"></script> </head> <body bgcolor="#000000"> <div id="slidedisp" style="width:800px;height:300px;"></div> <p align="center"> <script type="text/javascript"> $('#slidedisp').crossSlide({ fade: 1 },[ { src: '1.jpg', from: 'center center 1.5x', to: 'center center 0.8x', time: 4.0 }, { src: '2.jpg', from: 'center left 1.0x', to: 'bottom right 1.0x', time: 4.0 } ]); </script> </p> <p>　</p> </body> </html>

  • jQueryでスライドショーを作っているのですが

    jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、 （http://maxb.net/scripts/jbgallery-2.0/docs/nomenu.html） JavaScrip初心者の為、スライドショーを最後の画像でストップするやり方が分からず 困っております。 スライドショーにはjbgallery-2.0.jsといファイルを使用しております。 （ファイルを製作された方のサイトはこちら：http://maxb.net/scripts/jbgallery-2.0/） スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、 ぜひ教えていただきたいと思っております。 ご教授のほど、何卒よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する