同HTML内で複数のJavaScriptを設置

解決済

質問者：ami6149
質問日時：2012/08/31 03:04
回答数：1件

●JavaScriptを使用して、再生時間の異なったスライドショーを同時再生したい

(ｊｓ1とｊｓ2の画像を重ねて、アナログ時計が動くようなスライドショーにしたい)

●現状：どちらか一方の画像しか動かない（ソースの後に記述したｊｓのみ動く）

調べたところによると、jQueryを使用すれば可能との事で色々なサイトで調べ、
試行錯誤したのですがうまく動きません。

（参考にさせて頂いたサイト様：http://black-flag.net/jquery/20110525-3120.html）

jQueryを使用しなければ、同時再生はできないのでしょうか？
そうなると、以下のHTML、CSSなどを根本から変える必要があるように思っています。
※実際に上記のサイトを参考に行ってはみたのですが・・・力不足で解決できませんでした。

初歩的な質問かとは思いますが、ご指摘頂ければと思います。
よろしくお願い致します。

＿＿＿＿＿＿＿＿＿＿＿＿＿　　　XHTML　　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ポートフォリオ</title>
<link href="base.css" rel="stylesheet" type="text/css" media="all" />
<link href="top.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" src="portfolio.js"></script>
<script type="text/javascript" src="portfolio2.js"></script>

<noscript>
JavaScript対応ブラウザで表示してください。
</noscript>
</head>
<body onload="setTimeout('timerImg()', 3000);">

<body>

<div id="header">
<img src="portfolio/logo2.png" alt="ヘッダー"></div>
<div id="wrapper">
<div id="photo1">
<img name="img/1.png" src="img/1.png" alt="長針"></div>
<div id="photo4">
<img name="img2/1.png" src="img2/1.png" alt="短針"></div>

<div id="photo2">
<img src="portfolio/tokei.under.png"　alt="時計柄"></div>
<div id="photo3">
<img src="portfolio/tokei.logo.png"　alt="ロゴ"></div>

<ul id="contens-nav">
　<li id="home"><a href="portfolio.html">HOME"</a></li>
</ul>
<ul id="contens-nav2">
　<li id="works"><a href="works.html">WORKS"</a></li>
</ul>
<ul id="contens-nav3">
　<li id="about"><a href="about.html">ABOUT"</a></li>
</ul>
<ul id="contens-nav4">
　<li id="contact"><a href="contact.html">CONTACT"</a></li>
</ul>
</div>
</body>
</html>

＿＿＿＿＿＿＿＿＿＿＿＿＿　　　CSS（base）　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

@charset "UTF-8";

* {
margin:0;

}

body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
line-height: 1.5;
}

div#wrapper {
position:relative;
width: 844px;
left: 50%;
margin-left: -422px;
}

div#photo1 {
position: absolute;
left: 50%;
height: 100%;
width: 844px;
margin-left: -422px;
z-index: 3;
}
div#photo4 {
position: absolute;
left: 50%;
height: 100%;
width: 844px;
margin-left: -422px;
z-index: 2;
}

div#photo2{
position: absolute;
left: 50%;
height: 100%;
width: 844px;
margin-left: -422px;
z-index: 1;

}
div#photo3{
position: absolute;
left: 50%;
height: 100%;
width: 844px;
margin-left: -422px;
z-index: 4;
}
＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　1　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

// JavaScript Document


＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　2　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

// JavaScript Document

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： unacyo
回答日時：2012/08/31 21:01

気がついた所を。

＞　<body onload="setTimeout('timerImg()', 3000);">
このタイマーのタイムアウトが発生した場合、js1の中のtimerImg()とjs2の中のtimerImg()、どちらが呼び出されるとお考えでしょうか？
JSファイルを分けても同じ名称で関数を定義してしまうと、多重定義になってしまい、私の実験ではIE9でやりましたが、後に定義したほうが呼び出されるみたいです。
同様に、var photo も両方にありますよね？これも同じで、後から定義した方が使われているみたいです。
関数１つを１つのオリジナルの名称にして(js1はtimerImg1(), js2はtimerImg2())、var photo もオリジナルな名前になる様にすれば、動くのではないかと思います。

- 0
- 件

通報する

この回答へのお礼

unacyo様、ご回答ありがとうございます。JSファイルにそれぞれの名称をつけ、関数の多重定義を避けてみました。同時再生は可能になりましたが、画像が重なるところで不備が生じる状態（短針と長針が重ならないと針が動かない状態：12時の所で画像が重なるように画像の再生時間を調整しても）です。ご回答頂いた事を参考にして自分で改善したいと思います。ありがとうございました。

通報する

お礼日時：2012/09/02 15:28

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