同HTML内で複数のJavaScriptを設置
●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.dtd">
<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
<!--
var photo = new Array("img2/1.png", "img2/2.png", "img2/3.png","img2/4.png", "img2/5.png", "img2/6.png","img2/7.png", "img2/8.png", "img2/9.png","img2/10.png", "img2/11.png", "img2/12.png");
var i = 0;
function timerImg () {
if(document.images['img2/1.png'].complete) {
i++; if(i >= photo.length) i = 0;
document.images['img2/1.png'].src = photo[i];
}
setTimeout("timerImg()", 12000);
}
//-->
＿＿＿＿＿＿＿＿＿＿＿＿＿ ｊｓ 2 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
// JavaScript Document
<!--
var photo = new Array("img/1.png", "img/2.png", "img/3.png","img/4.png", "img/5.png", "img/6.png","img/7.png", "img/8.png", "img/9.png","img/10.png", "img/11.png", "img/12.png");
var i = 0;
function timerImg () {
if(document.images['img/1.png'].complete) {
i++; if(i >= photo.length) i = 0;
document.images['img/1.png'].src = photo[i];
}
setTimeout("timerImg()", 1000);
}
//-->
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ORUKA1951 様 自己解決致しました。 ｊｑｕｅｒｙのバージョン不一致により正常動作していない事が判明致しました。 お騒がせ致しました。
補足
ORUKA1951 様 早々のレスありがとうございます。 Ｗｅｂデザイナーが作成致しましたＨＴＭＬテンプレートを、 他のＳＥ／ＰＧがｇｓｐテンプレートファイルに当て込んだ システムの動作テストをしていましてこの不具合を発見しました。 上手く解決出来ず質問させて頂いた次第です。 なぜ～としないのですか？・・・・・申し訳ないです解りません。 因みに上記に変更してテストしましたが残念ながら同じ結果でした。 ｆｉｒｅｂｕｇでそれらしきエラーを表示しないのです。