人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptについて教えてください。

画像を順番に入替+URLでジャンプ(Target指定あり)のJavascriptを探しています。
デザイナーさんがわかりやすく修正できるような形式が理想です。


プログラムのイメージとしては

1)画像のファイル名はなんでもOK(aaa.jpg部分)で1行でわかりやすくかけること

//image, URL, targetを記入
image[0]=["image_index/aaa.jpg", "http://www.sharp.co.jp/", "_blank"]; //image0
image[1]=["image_index/abc.jpg", "http://www.sony.co.jp/", "_blank"]; //image1
image[2]=["image_index/bbb.jpg", "http://www.toyota.co.jp/", "_blank"]; //image2
image[3]=["image_index/def.jpg", "http://www.kawasaki.co.jp", "_blank"]; //image3


2)切り替える時間を下記のような感じで記述

reload_time = 2000; // 画像を切り替える時間をミリ秒で記述(1秒 = 1000ミリ秒)


3)このファイルは外部ファイルとして設置します。

index.html ←<script src="kirikae.js"></script> を入れるだけ
kirikae.js
image_index/aaa.jpg ←イメージの入っているフォルダ


よろしくお願いします。


●質問者: easel
●カテゴリ:ウェブ制作
✍キーワード:.jpg AAA ABC def HTML
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GEN111
●100ポイント ベストアンサー

質問の意図を読み違えていたらすみません。

// 画像
var image = [
 ["image_index/aaa.jpg", "http://www.sharp.co.jp/", "_blank"],
 ["image_index/abc.jpg", "http://www.sony.co.jp/", "_blank"],
 ["image_index/bbb.jpg", "http://www.toyota.co.jp/", "_blank"],
 ["image_index/def.jpg", "http://www.kawasaki.co.jp", "_blank"]
 ] ;

var reload_time = 2000 ; // 画像切り替え時間 (ミリ秒)


var index = 0 ;
var $ = function(id) { return document.getElementById(id) ; }
function reload_image() {
 ++index ;
 if (index >= image.length) index = 0 ;
 $('showimage').src = image[index][0] ;
 $('anchor').href = image[index][1] ;
 $('anchor').target = image[index][2] ;

 setTimeout(reload_image, reload_time) ;
}

document.write('<a href="'+image[0][1]+'" target="'+image[0][2]+'" id="anchor"><img src="'+image[0][0]+'" id="showimage" /></a>') ;
setTimeout(reload_image, reload_time) ;
◎質問者からの返答

思ったとおりに動作しました!

ありがとうございました。


2 ● higeorange
●35ポイント

http://q.hatena.ne.jp/1191642461

---HTML---

<p id="change"><a href="" target=""><img src="" alt="img"></a></p>


---JavaScript---

window.onload = function() {

var tid;

var c = 0;


var image = [];

image[0]=["image_index/aaa.jpg", "http://www.sharp.co.jp/", "_blank"]; //image0

image[1]=["image_index/abc.jpg", "http://www.sony.co.jp/", "_blank"]; //image1

image[2]=["image_index/bbb.jpg", "http://www.toyota.co.jp/", "_blank"]; //image2

image[3]=["image_index/def.jpg", "http://www.kawasaki.co.jp", "_blank"]; //image3


var reload_time = 5000;


// 画像先読み

for(var i = 0, len = image.length; i < len; i++) {

new Image().src = image[i];

}


(function (elm, interval) {

var self = arguments.callee

clearTimeout(tid);

var anc = elm.getElementsByTagName('a')[0];

anc.href = image[c][0];

anc.target = image[c][2];

elm.getElementsByTagName('img')[0].src = image[c][1];

c = c++ < images.length - 1 ? c++ : 0

tid = setTimeout(function() { self(elm, interval)}, interval);

})(document.getElementById('change'), reload_time);

};

◎質問者からの返答

ありがとうございました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ