現在、バナー画像と対応するリンクの
一定時間での入れ替えは出来るようになりました。
※現在のソースを質問の最後に記述してあります。
このような動きをするバナー画像を、縦に複数個並べたいと思い、
いろいろと試してみましたが、うまくいかず大変苦戦しております。
◆処理イメージ◆
スペース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件)
- 最新から表示
- 回答順に表示
No.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>
No.2
- 回答日時:
<!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>
No.1
- 回答日時:
上手くいかない
というのはどう上手くいかないの?
予定と実際の違いを教えて。
それとどうせ載せるなら現在のソースじゃなくて
上手くいっていないソースの方がいいわ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS WEBサイト 画像の直接リンクについて 1 2022/11/16 10:41
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Colorboxがうまく設置できません
-
画像の表示位置
-
embed要素のsrc属性の値を変更...
-
clear機能を失わずにファイルア...
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
JQueryを使用して、画像をドラ...
-
MAX関数を使ってからLEFT JOIN...
-
Javascript で共通の処理をどこ...
-
jspでcssが読み込めない
-
1枚の画像をクリックして複数の...
-
読み込んだQRコードをフォーム...
-
JSPでの画像ファイル表示
-
【jQuery】遅延実行(タイムラ...
-
画像をクリックすると音が鳴り...
-
bxsliderにて読み込み後に内容...
-
Javascriptで指定した日付と時...
-
HTMLですCSSです この画像のよ...
-
Slick.jsのオプションrtlについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
アップロードファイルの種類に...
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
-
サムネイルにカーソルを合わせ...
-
Javascript初心者|jQueryの.va...
-
ボタンを押すたびに交互に切り...
-
Colorboxがうまく設置できません
-
JavaScriptでクレイアニメ。ち...
-
fancyboxのポップアップ時の画...
-
マウスカーソルに合わせて画像...
-
bxsliderで最初に縦に複数表示...
-
交互に入れ替わる画像を複数配置
-
jQueryで4枚の画像がフェードア...
-
jQueryでn秒後に要素を最後に移動
-
クリックでクリッカブルマップ...
-
jquery:animate中にイベントを付与
-
JQueryで画像の上で文字を動かす
-
アニメーションをループさせたい
-
HTMLへ要素の挿入について
おすすめ情報