javascriptのスライドショーについての質問です。

締切済

質問者：bluegray0628
質問日時：2010/09/13 20:41
回答数：5件

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-transitio …
<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.1

回答者： imaimasan
回答日時：2010/09/14 00:43

<li><a href="#image2">2</a></li>

</ul>
<script type="text/javascript" </script>

$(document) .ready(function(){

この部分。
scriptタグが閉じれてないです。

- 0
- 件

通報する

この回答へのお礼

初歩的な質問ながらご回答いただき大変恐縮です。
ありがとうございました。

通報する

お礼日時：2010/09/14 18:05

No.2

回答者： yyyyyyyy8
回答日時：2010/09/14 01:52

<script type="text/javascript">

$(document) .ready(function(){
ーーーーーー略ーーーーーー
return false;
});
};

</script>

正しい位置に>と</script>がなかったようです

- 0
- 件

通報する

この回答へのお礼

初歩的な質問ながらご回答いただき大変恐縮です。
ありがとうございました。

通報する

お礼日時：2010/09/14 18:03

No.3

回答者： yyr446
回答日時：2010/09/14 09:03

<head>部に

この回答への補足

yyr446様

初歩的な質問にご回答いただき大変恐縮です。
javascriptに関してまだ知識不足で回答いただいたのにもう少し良く理解できません。

それはそれといたしまして、私なりに認識していることがいくつかあります。
間違いがあればご指摘いただければ幸いです。

以下教科書の記述の引用
　　　　　　　使用する主なメソッド・ライブラリ
　　　　　　　　jQuery
hideメソッド(jQuery)
removeClassメソッド(jQuery)

スクリプトの流れ
　　１．ページ内にあらかじめ画像を配置し、dispryプロパティを非表示に設定しておきます。
　　　　　　　　
　　　　　　　　これについては
　　　　　　　　img{
display:none;
} 　
と記述しました。
　　２．ナビゲーションリンクにclickイベントを追加し、クリックしたナビゲーションに応じて
　　　　非表示になっている画像を表示させます。　

　　　　　　　　それからjQueryのライブラリのファイルは自分のサイトの
　　　　　　　　ローカルとリモートサイトにアップしてあります
　　　　　　　　またslideshow.jsというファイルはJQueryに含まれているのでしょうか？
　　　　　　　　こんな状況で試してみましたが動作はしませんでした。
　　　　　　　　そうかんたんにはいきませんよね。
　　　　　　　　質問も漠然としていると思いますが何かアドバイスがありましたら
　　　　　　　　宜しくお願いいたします。
　　　　　　　　ちなみに私のサイトのURL http://brownpaper.biz/です。
　　　　　　　　この中の画像をスライドさせてみたいと考えています。
　　　　　　　　それからこの質問のslideshowというタイトルのファイルはあくまでも
　　　　　　　　試験的に書いたものです。
　　　　　　　それでは失礼いたします。PS.購入した参考書も少し難しいようでした。

補足日時：2010/09/14 21:24

通報する

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2010/09/15 01:26

もう、おはようかぁ？！

２つまえのしつもんが、けっきょく、すらいどしょ～っぽくなりました。
あんごうのようでもうしわけない、なにかのさんこうになるのか？ならないのか？
びみょうですが・・・・。

- 0
- 件

通報する

No.5

回答者： yyr446
回答日時：2010/09/15 11:02

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>

- 0
- 件

通報する

この回答へのお礼

おかげさまでとっても参考になりました。
何とか思い通りの結果を得ることが出来ました。
ご指摘の、このコードを記述することで動作するようになりました。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
jquery関してはまだ良く理解できませんが、今はあまり深く考えないようにします。
そのうちに分る日が来ると思います。
ありがとうございました。

通報する

お礼日時：2010/09/19 08:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！