プロが教えるわが家の防犯対策術!

現在、バナー画像と対応するリンクの
一定時間での入れ替えは出来るようになりました。
※現在のソースを質問の最後に記述してあります。

このような動きをするバナー画像を、縦に複数個並べたいと思い、
いろいろと試してみましたが、うまくいかず大変苦戦しております。

◆処理イメージ◆
スペース1:バナー1~バナー3を入れ替え
スペース2:バナー4~バナー6を入れ替え
スペース3:バナー7~バナー9を入れ替え

JavaScriptにお詳しい方、実現方法をお教え頂けないでしょうか?
何卒よろしくお願いいたします。

◆現在のソース◆
<head>
<title>インターネット上にあるバナー画像を一定時間ごと入れ替える</title>
<script language="JavaScript"><!--
num = 3;
jumpURL = new Array();
imgURL = new Array();
jumpURL[0] = "http://aaa";
jumpURL[1] = "http://bbb";
jumpURL[2] = "http://ccc";
imgURL[0] = "http://XXX/0.gif";
imgURL[1] = "http://XXX/1.gif";
imgURL[2] = "http://XXX/2.gif";

function changeImg()
{
num++;
num %= 3;
document.banner.src = imgURL[num];
setTimeout("changeImg()",10000);
}
function jump()
{
window.open(jumpURL[num]);
}
// --></script>
</head>
<body onLoad="setTimeout('changeImg()',5000)">
<a href="javaScript:jump()">
<img src="http://XXX/0.gif" name="banner">
</a>
</body>

A 回答 (3件)

ジャンプしなかったので修正!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>BannerChange</title>
<style type="text/css">
.bn { width:160px; height:50px; }
.gb0 { border:1px #f88 solid; }
.gb1 { border:1px #8f8 solid; }
.gb2 { border:1px #88f solid; }
</style>
<div id="banner0">
<a href="http://www.test0.jp"><img src="./img/0.gif" class="bn gb0"></a>
<a href="http://www.test1.jp"><img src="./img/1.gif" class="bn gb0"></a>
<a href="http://www.test2.jp"><img src="./img/2.gif" class="bn gb0"></a>
</div>
<div id="banner1">
<a href="http://www.test3.jp"><img src="./img/3.gif" class="bn gb0"></a>
<a href="http://www.test4.jp"><img src="./img/4.gif" class="bn gb0"></a>
<a href="http://www.test5.jp"><img src="./img/5.gif" class="bn gb0"></a>
</div>
<div id="banner2">
<a href="http://www.test6.jp"><img src="./img/6.gif" class="bn gb0"></a>
<a href="http://www.test7.jp"><img src="./img/7.gif" class="bn gb0"></a>
<a href="http://www.test8.jp"><img src="./img/8.gif" class="bn gb0"></a>
</div>

<script type="text/javascript">
//@cc_on
function Disp(mode) {
return this.style.display = mode ? 'inline': 'none';
}
function BannerChanger () {
this.init.apply(this, arguments);
this.change();
};
BannerChanger.prototype.init = function (elementId, wtime) {
var count = 0;
this.anchorNo = 0;
this.anchors = document.getElementById(elementId).getElementsByTagName('a');
this.time = wtime;
while (o = this.anchors[count++]) {
o.style.display = (count == 0) ? 'block': 'none';
}
return true;
};
BannerChanger.prototype.change = function () {
Disp.call(this.anchors[this.anchorNo]);
this.anchorNo = (this.anchorNo + 1) % this.anchors.length;
Disp.call(this.anchors[this.anchorNo], true);
setTimeout( (function(cb_) { return function () { cb_.change(); }; })(this), this.time);
};
/*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () {
new BannerChanger('banner0', 1500);
new BannerChanger('banner1', 2000);
new BannerChanger('banner2', 2500);
}, false);


</script>
    • good
    • 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<title>Tool tip</title>
<style type="text/css">
.bn { width:160px; height:50px; }
.gb0 { border:1px #f88 solid; }
.gb1 { border:1px #8f8 solid; }
.gb2 { border:1px #88f solid; }
</style>
<div id="chgimg0">
<img src="./img/0.gif" title="htp:/ww/test0.jp" class="bn gb0">
<img src="./img/1.gif" title="htp:/ww/test1.jp" class="bn gb0">
<img src="./img/2.gif" title="htp:/ww/test2.jp" class="bn gb0">
</div>
<div id="chgimg1">
<img src="./img/3.gif" title="htp:/ww/test3.jp" class="bn gb1">
<img src="./img/4.gif" title="htp:/ww/test4.jp" class="bn gb1">
<img src="./img/5.gif" title="htp:/ww/test5.jp" class="bn gb1">
</div>
<div id="chgimg2">
<img src="./img/6.gif" title="htp:/ww/test6.jp" class="bn gb2">
<img src="./img/7.gif" title="htp:/ww/test7.jp" class="bn gb2">
<img src="./img/8.gif" title="htp:/ww/test8.jp" class="bn gb2">
</div>

<script type="text/javascript">
function Disp(mode) {
return this.style.display = mode ? 'inline': 'none';
}
function ImageChanger () {
this.init.apply(this, arguments);
this.change();
};
ImageChanger.prototype.init = function (elementId, wtime) {
var count = 0;
this.imgNo = 0;
this.images = document.getElementById(elementId).getElementsByTagName('img');
this.time = wtime;
while (o = this.images[count++]) {
o.style.display = (count == 0) ? 'block': 'none';
}
return true;
};
ImageChanger.prototype.change = function () {
Disp.call(this.images[this.imgNo]);
this.imgNo = (this.imgNo + 1) % this.images.length;
Disp.call(this.images[this.imgNo], true);
setTimeout( (function(cb_) { return function () { cb_.change(); }; })(this), this.time);
};
new ImageChanger('chgimg0', 1500);
new ImageChanger('chgimg1', 2000);
new ImageChanger('chgimg2', 2500);

</script>
    • good
    • 0

上手くいかない



というのはどう上手くいかないの?
予定と実際の違いを教えて。

それとどうせ載せるなら現在のソースじゃなくて
上手くいっていないソースの方がいいわ。
    • good
    • 0

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