掲示板/総合質問板/過去ログ/一覧/ JavaScript　画像の増やし方

0 名前： ずっこ ： 2005/03/24 17:32: <html>

<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-JP">
<SCRIPT language="JavaScript">

</SCRIPT>

</head>

<body>
<a href="javascript:changeImage()"><img src="1.jpg" name="myimg"></a>
画像をクリックすると画像がかわります。
</body>

</html>

↑コレの画像の増やし方を教えて下さい。

1 名前： カヅサツ ： 2005/03/24 18:03: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<script type="text/javascript">
function changeImage(obj,firstImg,secondImg){
if(obj.src == firstImg){
obj.src = secondImg;
} else {
obj.src = firstImg;
}
}
</script>
</head>
<body>
<p><img src="./1.jpg" onclick="changeImage(this,'./1.jpg','./2.jpg')"></p>
<p><img src="./3.jpg" onclick="changeImage(this,'./3.jpg','./4.jpg')"></p>
</body>
</html>

2 名前： ずっこ ： 2005/03/25 00:39: 返信ありがとうございます。

あの、一つの画像から、2枚、3枚･･･と、増やしたいんです。
あと、全部見終わったら、最初の一枚目に戻るような感じにできませんかね？

打開策がありましたら、教えてくださぃ☆　
m（-　-）mペコ

3 名前： むむりく ： 2005/03/25 01:05: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<script type="text/javascript">
// imgList に変えたい画像を。追加・削除可能。
var imgList=['1.gif','2.gif','3.gif','4.gif','5.gif'], imgNum = 0;

function changeImage(obj) {
imgNum = (imgNum == imgList.length - 1) ? 0 : imgNum + 1 ;
obj.src = imgList[imgNum];
}
</script>
</head>
<body>
<p><img src="1.gif" onclick="changeImage(this)" alt=""></p>
</body>
</html>

4 名前： Pid ： 2005/03/25 23:32: いろいろごちゃまぜ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<script type="text/javascript">

window.onload = function() {
//--------------------------------------------------

function SrcList() {
this.length = 0; Array.prototype.push.apply(this, arguments);
}

SrcList.prototype.prefetch = function() {
var I = this.length, i = 0; while (i < I) (new Image).src = this[i++];
}

function ImageChanger(id) {
this.image = document.images[id];
this.current = 0;

SrcList.apply(this, arguments); this[0] = this.image.src;
this.prefetch();

var self = this; this.image.onclick = function() { self.change(); }
}

ImageChanger.prototype = new SrcList;

ImageChanger.prototype.change = function() {
this.current = (this.current + 1) % this.length;
this.image.src = this[this.current];
}

//--------------------------------------------------
// 最初に img 要素の id を指定し，後は画像を好きなだけ指定。
new ImageChanger('icon1', '2.gif', '3.gif', '4.gif', '5.gif');
new ImageChanger('icon2', '7.gif', '8.gif', '9.gif');
//--------------------------------------------------
}

</script>
</head>
<body>
<p><img src="1.gif" alt="*" id="icon1"></p>
<p><img src="6.gif" alt="*" id="icon2"></p>
</body>
</html>

使い方の説明はしません（見れば分かるはず）のであしからず。

5 名前： ずっこ ： 2005/03/25 09:18: むむりくさん、Pidさん、返信ありがとうございます。
おかげさまで、できました♪
どぉ～もありがとうございました☆

画像を戻すボタン、進めるぼたんって、付けれるんですかね？
また、スレッド作るので、
良かったらまた、ご指導くださぃ♪

JavaScript 画像の増やし方

JavaScript　画像の増やし方