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