- 締切済み
javascriptのスライドショーについての質問です。
javascriptのスライドショーについての質問です。 javascriptの勉強を始めたところです。ある教科書の中にjQueryを使用した スライドショーのコードが掲載されていました。それを下記のように記述しましたが、 ブラウザで確認するとスクリプトのコードがそのまま表示されてしまいます。 基本的な間違いがあるように思うのですが、宜しくご回答いただけたら嬉しいです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>slideshow</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/slideshow"></script> </head> <body> <div id="slideshow"> <img id="image1" src="/livingimg/003.jpg" alt="Image 1" /> <img id="image2" src="/livingimg/004.jpg" alt="Image 2" /> </div> <div id="imagealt"><p></p></div> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> </ul> <script type="text/javascript" </script> $(document) .ready(function(){ var slideImages = $('#slideshow > img' ); slideImage.hide().filter(':first').show(); $('imagealt p').text(slideImages.filter('first').attr('alt')); $('ul.imagelist li a').click(function(){ if (this.className.indexOf('current') == -1) { slideImages.hide(); slideImages.filter(this.hash).fadeIn(500); $('ul.imagelist li a').removeClass('current'); $(this).addClass('current'); $('#imagealt p').text(slideImages.filter(this.hash). attr('alt')); } return false; }); }; </body> </html>
- bluegray0628
- お礼率40% (6/15)
- JavaScript
- 回答数5
- ありがとう数8
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
No.3です。 「またslideshow.jsというファイルはJQueryに含まれているのでしょうか？ 質問のslideshowというタイトルのファイルはあくまでも試験的に書いたものです。」 そおいう事か。 slideshow.jsはあなたが正に書いているJavascriptだと思ってました。 slideshow.jsはどこにも存在しません。 （ありがちな名前なので、そんな事はないだろうけど） ソースがそのまま表示されてしまうのは、No.1、No.2の方が回答してるように </script>がないからです。 それから、ご提示のコードだと最後の ）が抜けてます。 $(document).ready(function(){ が閉じてません、 };); と終わらせます。ここの;は省略できますが。 それから、s が一箇所抜けてます（タイポですね） ×slideImage.hide().filter(':first').show(); ○slideImages.hide().filter(':first').show(); CSSで .current {display:none;} としとけば 一応、動作します。お望みの動作かどうかは？です （これでもスライドショーと呼べないことは無い） そもそもスライドショーの定義ってなんだ。 参考までに全体を載せときます。 （見やすくするため全角空白インデントしてるのでご注意） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> img {display:none;} current {display:none;} </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript"> $(document).ready(function(){ var slideImages = $('#slideshow > img' ); slideImages.hide().filter(':first').show(); $('imagealt p').text(slideImages.filter('first').attr('alt')); $('ul.imagelist li a').click(function(){ if (this.className.indexOf('current') == -1) { slideImages.hide(); slideImages.filter(this.hash).fadeIn(500); $('ul.imagelist li a').removeClass('current'); $(this).addClass('current'); $('#imagealt p').text(slideImages.filter(this.hash).attr('alt')); } return false; }); }); </script> <body> <div id="slideshow"> <img id="image1" src="/livingimg/003.jpg" alt="Image 1" /> <img id="image2" src="/livingimg/004.jpg" alt="Image 2" /> </div> <div id="imagealt"><p>なんじゃこのPは</p></div> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> </ul> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
もう、おはようかぁ？！ ２つまえのしつもんが、けっきょく、すらいどしょ～っぽくなりました。 あんごうのようでもうしわけない、なにかのさんこうになるのか？ならないのか？ びみょうですが・・・・。
- yyr446
- ベストアンサー率65% (870/1330)
<head>部に <script type="text/javascript" src="js/slideshow"></script> とありますが、不要、もしくは、↓をそのまんま $(document).ready(function(){ var slideImages = $('#slideshow > img' ); slideImage.hide().filter(':first').show(); $('imagealt p').text(slideImages.filter('first').attr('alt')); $('ul.imagelist li a').click(function(){ if (this.className.indexOf('current') == -1) { slideImages.hide(); slideImages.filter(this.hash).fadeIn(500); $('ul.imagelist li a').removeClass('current'); $(this).addClass('current'); $('#imagealt p').text(slideImages.filter(this.hash).attr('alt')); } return false; }); }); slideshow.jsという名前で、jsディレクトリーにアップして <script type="text/javascript" src="js/slideshow.js"></script> に修正する。そうすれば、 <body>以下にはSCRIPTは書かなくてよい。 さらに他にCSS定義が必用なのでは？ （質問時に投稿をしょうりゃくしただけかな）
補足
yyr446様 初歩的な質問にご回答いただき大変恐縮です。 javascriptに関してまだ知識不足で回答いただいたのにもう少し良く理解できません。 それはそれといたしまして、私なりに認識していることがいくつかあります。 間違いがあればご指摘いただければ幸いです。 以下教科書の記述の引用 使用する主なメソッド・ライブラリ jQuery hideメソッド(jQuery) removeClassメソッド(jQuery) スクリプトの流れ １．ページ内にあらかじめ画像を配置し、dispryプロパティを非表示に設定しておきます。 これについては img{ display:none; } と記述しました。 ２．ナビゲーションリンクにclickイベントを追加し、クリックしたナビゲーションに応じて 非表示になっている画像を表示させます。 それからjQueryのライブラリのファイルは自分のサイトの ローカルとリモートサイトにアップしてあります またslideshow.jsというファイルはJQueryに含まれているのでしょうか？ こんな状況で試してみましたが動作はしませんでした。 そうかんたんにはいきませんよね。 質問も漠然としていると思いますが何かアドバイスがありましたら 宜しくお願いいたします。 ちなみに私のサイトのURL http://brownpaper.biz/です。 この中の画像をスライドさせてみたいと考えています。 それからこの質問のslideshowというタイトルのファイルはあくまでも 試験的に書いたものです。 それでは失礼いたします。PS.購入した参考書も少し難しいようでした。
- yyyyyyyy8
- ベストアンサー率0% (0/3)
<script type="text/javascript"> $(document) .ready(function(){ ーーーーーー略ーーーーーー return false; }); }; </script> 正しい位置に>と</script>がなかったようです
お礼
初歩的な質問ながらご回答いただき大変恐縮です。 ありがとうございました。
<li><a href="#image2">2</a></li> </ul> <script type="text/javascript" </script> $(document) .ready(function(){ この部分。 scriptタグが閉じれてないです。
お礼
初歩的な質問ながらご回答いただき大変恐縮です。 ありがとうございました。
お礼
おかげさまでとっても参考になりました。 何とか思い通りの結果を得ることが出来ました。 ご指摘の、このコードを記述することで動作するようになりました。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> jquery関してはまだ良く理解できませんが、今はあまり深く考えないようにします。 そのうちに分る日が来ると思います。 ありがとうございました。