掲示板/JavaScript質問板/過去ログ/一覧/ スライドショー・自動的に移動

0 名前： nap ： 2005/12/21 10:49: 写真ギャラリーのサイトを制作しています。

<script type="text/javascript">

</script>

とスクリプトを組んで、画像をクリックすると次の画像へ移り変わるようにしています。

一定の時間が経過すると、次の画像に移り変わるようにするにはどのように記述すれば良いでしょうか？
１枚ずつ他のページに掲載して、リンクするというのも考えましたが、
できればJava Scriptで、と思っています。

よろしくおねがいします。

1 名前： 匿名希望 ： 2005/12/21 10:49: var n = 0;
setTimeout(function() { changeImage(obj, n++); }, 3000);

2 名前： 匿名希望 ： 2005/12/21 10:49: ごめん、ねぼけてた。

var n = 0;
function slideImage(obj) {
setTimeout(function() { changeImage(obj, n++); slideImage(obj); }, 3000);
}

3 名前： nap ： 2005/12/21 10:49: これを何処に記述すれば良いのでしょうか？
自分の知識のなかでいろいろと試してみましたが、上手くいきませんでした。

4 名前： m035 ： 2005/12/21 10:49 ［URL］: var n = 0;
function slideImage(obj) {
setTimeout(function() { changeImage(obj, n++); slideImage(obj); }, 3000);
}
をどこかに追加して、changeImage()を以下に変更してみたらどうでしょう。
function changeImage(obj,n) {
　　　　imgNum = (imgNum + n)%imgList.length;
　　　　document.getElementById(obj).src = img_obj[imgNum].src;
　　　　slideImage(obj);
}

5 名前： nap ： 2005/12/21 10:49: ありがとうございます。

教えていただいた通り、変更してみましたが、
3,4枚目から、移り変わる時間・順番共にランダムになってしまいます。

どうすれば良いのでしょうか？；；
よろしくお願いいたします。

7 名前： m035 ： 2005/12/21 10:49 ［URL］: 以下に変更してみたらどうでしょう。
var timer=setTimeout("",0);
function changeImage(obj,n) {
　　　　clearTimeout(timer);
　　　　imgNum = (imgNum + n)%imgList.length;
　　　　document.getElementById(obj).src = img_obj[imgNum].src;
　　　　n++;
　　　　timer=setTimeout(function(){changeImage(obj,n), 3000);
}
onclickはchangeImage()で。

8 名前： 匿名希望 ： 2005/12/21 10:49: どうせやるなら、HTMLで画像リストを書いておいて、それを使ってスライドショーした方が
JavaScript非対応云々を考えなくて済むと思った。

眠いので提案だけ。誰か作って(w

9 名前： Pid ： 2005/12/21 10:49: >>8
いろいろ不備がありますのでツッコミ歓迎（永久ループより，利用者が操作できる仕組みが欲しいですね）。

【追記】恥ずかしいバグがあったので修正 m(_ _)m。ついでに，画像をクリックするとループを停止するようにしました（もう一度クリックするとまた動きます）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>スライドショーもどき</title>

<script type="text/javascript">
onload = function() {
////////////////////////////////////////////////////////////

function ImagePreloader(nodes) {
var anc, itm, img;
this.length = 0;
while ((anc = nodes[0]) && (itm = anc.parentNode) && (img = new Image)) {
Array.prototype.push.call(this, itm);
itm.style.display = 'none';
itm.style.listStyle = 'none';
itm.replaceChild(img, anc);
img.src = anc.href;
img.alt = anc.firstChild.data;
}
}

function TimeManager() {
this.id = null;
this.onloop = true;
}

TimeManager.prototype.loop = function(msec, handler) {
this.id = function(theObj) {
return setTimeout(function() { handler(); theObj.loop(msec, handler); }, msec);
} (this);
}

TimeManager.prototype.stop = function() {
clearTimeout(this.id);
}

function ImageChanger(node) {
this.index = 0;
ImagePreloader.call(this, node.getElementsByTagName('a'));
this.show(0);
}

ImageChanger.prototype.change = function(num) {
this.hide(this.index);
this.show(this.index = (this.index + num) % this.length);
}

ImageChanger.prototype.show = function(index) {
this[index].style.display = 'block';
}

ImageChanger.prototype.hide = function(index) {
this[index].style.display = 'none';
}

ImageChanger.viewAuto = function(id, msec) {
var node = document.getElementById(id);
if (node) {
var ic = new this(node);
var tm = new TimeManager;
var play = function() { tm.loop(msec, function() { ic.change(1); } ); }
var stop = function() { tm.stop(); }
node.onclick = function() { if (tm.onloop = !tm.onloop) play(); else stop(); }
play();
}
}

////////////////////////////////////////////////////////////
// ↓↓ ここに設定を並べる
// ImageChanger.viewAuto( 画像リストの ID , ミリ秒間隔 );

ImageChanger.viewAuto('album1', 1000);
ImageChanger.viewAuto('album2', 2000);

// ↑↑ 複数のリストを異なる間隔で同時に表示することも可能
////////////////////////////////////////////////////////////
}
</script>

<ul id="album1">
<li><a href="sample1.jpg">写真 1</a></li>
<li><a href="sample2.jpg">写真 2</a></li>
<li><a href="sample3.jpg">写真 3</a></li>
<li><a href="sample4.jpg">写真 4</a></li>
</ul>

<ul id="album2">
<li><a href="sample5.jpg">写真 5</a></li>
<li><a href="sample6.jpg">写真 6</a></li>
<li><a href="sample7.jpg">写真 7</a></li>
</ul>