• ベストアンサー

JavaScript・cssを使って、画像を自動スクロールさせたいので

JavaScript・cssを使って、画像を自動スクロールさせたいのですが、http://spaceforaname.com/filmstrip.htmlのように表示させる方法を詳しく、分かりやすく教えて頂きたいです。よろしくお願いいたします。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

それは「GalleryView: A jQuery Content Gallery Plugin」ですね。 http://spaceforaname.com/galleryview jQueryベースのスライドショー用のライブラリーです。 GalleryViewで検索すれば、簡単な日本語の使い方ページも幾つか見つかります。 http://blog.mudaimemo.com/2009/04/galleryview-jquery.html http://misato.moo.jp/jquery/galleryview_code_02.html http://ameblo.jp/fumitane/entry-10303803872.html 表示させる方法を詳しく、分かりやすく ＝＞動作原理ですか？ 幅固定の<ul>の中に<li>でイメージ要素を横にずらっと並べて、 スクロール量を計算して、クリックイベントとかタイマーで <UL>のpostionを変えてるみたいですね。(firebugで見た限り)

valuecojo
質問者

お礼

とっても分かりやすいご回答、ありがとうございます！！ 無事、思い通りに表示させることができました！！ 参考サイトも教えて頂き本当に感謝です！！ ありがとうございました！！

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

関連するQ&A

  • JavaScriptを使って縦に画像がスクロールするページを作りたいの

    JavaScriptを使って縦に画像がスクロールするページを作りたいのですが、 (こんなかんじで動く)http://www.gmarwaha.com/jquery/jcarousellite/index.php 私はまだ勉強中で、テンプレートをダウンロードして少々いじって使う程度しかできません。 テンプレートで縦に動くものをみつけたのですが http://sorgalla.com/jcarousel/ 画像や全体の幅を広げようとまずCSSで調整したら、画像は大きくなったけど、 全部縦に画像がうまく並ばず、何枚も画像が表示されるはずなのに、1枚しか表示されなくなりました。 矢印ボタンを押してスクロールさせようとすると、 表示枠は長くしてあるのに、一番上の画像が別の画像に切り替わるという感じです。 言葉だけではうまく伝わらないとは思いますが。。 一番上に記載したURLのやつを縦バージョンにする方法など、 あったら教えていただけないでしょうか？ 他にも、縦にスクロールするJavascriptをご存知の方いらっしゃいましたら、教えていただけると助かります。 他力本願で大変お恥ずかしいのですが、どなたかうまく作れる方法がありましたらご協力お願いします！！

  • JavaScriptでスクロール画像

    JAvaScriptで、ブラウズのスクロール時に画像が常に固定の位置で表示される（付いて来る）ようなことをしたいのですが、何か良いサンプルはございますか？

  • 画像の一部分をスクロールして表示する方法

    画像の一部分をスクロールして表示する方法 初めて質問させていただきます。 一枚の画像の一部分を表示させ、画像をスクロールさせる→次の画像へ移る という見せ方をしたいと思っています。 参考サイト：http://www.kmad.jp/index.html ここのトップページのような形が出来たらと思っています。 HTMLとCSSには少し慣れてきたのですが、JavaScriptは初心者で全く分からない状態です。 もしJavaScript以外の方法でいいやり方があれば、そちらも教えていただけるとありがたいです。 すみませんが、詳しい方、宜しくお願いします。

  • スクロールに沿ってjavascriptで背景画像を

    現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい） cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。

  • JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動

    JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動切換え、さらにその画像にリンク先urlの指定のやり方をわかる方いらっしゃいましたら教えてください。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは過去質問でわかったのですが、その画像にリンクさせる方法をお願い致します。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは http://www.tagindex.com/kakolog/q4bbs/201/360.html こちらの質問内記載のタグを参照させて頂きました。 これに個々の画像にリンクをつけたいのです。 よろしくお願い致します。

  • スクロールしても背景画像が止まって表示されるJavaScript

    ホームページでスクロールしても背景画像が止まって表示されるJavaScriptを教えてください。 前まで知っていたんですけど、検索しても見つかりません。よろしくお願いします。

  • ホームページ作成で画像スクロールがうまくいきません

    ホームページ作成で画像スクロールがうまくいきません http://www.beautrium.com/ 上記のページと画像は変えてまったく同じように作りたいのですが、flashを使わなけ れば無理なのでしょうか？ ご教授下さい 上記のページのように 画像を画面いっぱいにだし 同じスピードにしたいと思っております javascript css html を使っているのですが なかなか上手くいきません。 ちなみにfirefoxにも対応させたいと思っております 宜しくお願い致します。

  • CSS スクロールバーのデフォルト スクロール位置について

    　お世話になります。 　CSSの x-scroll　などで作成した左右にスクロールするスクロールバーがあります。 　通常ですとページ読み込み時、スクロールエリアは左端にスクロールされた状態なのですが、右端にスクロールされた状態をデフォルトにする良い方法はないでしょうか？ 　javascriptで対応する方法も考えたのですが、一画面にスクロールするエリアが何箇所もある為、「一つ一つスクロールバーを移動」という処理よりも、最初から右側にスクロールされた状態で表示させる方法があるなら、そちらの方が良いような気がします。 　同じようなことをされた方とか、ノウハウをお持ちの方、いらっしゃいませんでしょうか？？

  • CSSやJavaScriptの使用の法律問題

    jQueryやJavaScriptで画像やテキストを自動で切り替える 方法の法律的な事について、今回お聞きしたく思います。 jQueryはCSSに属したプログラミング言語だと理解しています。 またJavaScriptもプログラミング言語で、ホームページなど でCSS同様に使われていると理解しています。 この「画像を自動的に切り替える」ためのCSS(jQuery)や JavaScriptを使用を考えているのですが、どのような 手続きを得た方が良いのか、お聞きしたく今回投稿しました。 具体的には、CSS(jQuery)やJavaScriptは知的財産に該当 する分野だとは認識しています。 常識的に、勝手に承諾を得ずに使用しても良くない、また 使用料の契約問題も発生するのではないかと思っています。 CSS(jQuery)の使用については開発者に承諾を得ればよい とか、JavaScriptの使用については、承諾を得て、かつ使用 料の問題も発生すると言った具体的な事をお聞きしたく思い ます。 CSS(jQuery)やJavaScriptの使用について、深くご存じの方に お聞きしたく思います。

  • 画像にcssについて

    すいません。以下のブログにアマゾンのリンクが左にあると思うのですが、この画像の上に文字を置いてるのはどういったCSSなのでしょうか？ http://kanasoku.blog82.fc2.com/ CSSのpositionなどで絶対位置で指定しているわけでもなく、画像を背景にしているわけでもなく このような画像の上に文字を置けるのが非常に不思議です。 私はプログラムはphpが少し分かるくらいでして、もしかするとまったく知らないjavascriptかな・・とも思いましたがブラウザのjavaを切っても表示されていますし・・。 今はソフトはドリームウィーバーCS6の体験版を使っているのですが、CSS自体が初めてでもし分かる方いましたら教えてください。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する